网站制作公司拟,安徽餐饮加盟网站建设,凡科建的网站怎么样,中小企业公共服务平台Vue组件
组件是Vue中不可或缺的一个功能#xff0c;它可以将一个页面划分为多个独立的内部组件#xff0c;方便代码的管理。
定义组件
bodydiv idAppbcomp/bcomp/divscriptconst app Vue.createApp({})cons…Vue组件
组件是Vue中不可或缺的一个功能它可以将一个页面划分为多个独立的内部组件方便代码的管理。
定义组件
bodydiv idAppbcomp/bcomp/divscriptconst app Vue.createApp({})const buttonComponent {// 组件的HTML渲染模板template: divbutton按钮/button/div}app.component(bcomp, buttonComponent) // 将Component组件绑定到应用实例中并取别名compapp.mount(#App) // 将app应用实例绑定到idApp的HTML元素上/script
/body这是一个最简单的组件buttonComponent的作用就是在页面中渲染出一个按钮。 app.component()函数可以将buttonComponent组件绑定到app实例中
渲染结果 Props选项
props定义的属性是提供给外部进行设置使用的
定义props属性
bodydiv idAppbcomp button-title按钮1/bcomp/divscriptconst app Vue.createApp({})const buttonComponent {// 定义外部属性props: [buttonTitle],// 组件的HTML渲染模板template: divbutton{{ buttonTitle }}/button/div}app.component(bcomp, buttonComponent) // 将Component组件绑定到应用实例中并取别名compapp.mount(#App) // 将app应用实例绑定到idApp的HTML元素上/script
/body可以看出props先从外部获取了属性值然后将属性值在组件内部进行使用。
渲染结果 $emit方法
在组件内部可以使用$emit方法来传递事件。 比如现在有两个组件子组件负责渲染按钮的HTML界面父组件负责按钮的点击事件。 子组件渲染完按钮后按钮的点击事件不是自己做而是需要传给父组件去做这时候就需要用到$emit方法了。 假如我们的任务是点击按钮后需要在控制台输出一个emit。
$emit简单使用
bodydiv idAppbcomp button-title按钮1 click-to-loglog/bcomp/divscriptconst app Vue.createApp({methods: {// log函数log() {console.log(emit)}},})const buttonComponent {// 定义外部属性props: [buttonTitle],// 组件的HTML渲染模板template: divbutton click$emit(clickToLog){{ buttonTitle }}/button/div}app.component(bcomp, buttonComponent) // 将Component组件绑定到应用实例中并取别名compapp.mount(#App) // 将app应用实例绑定到idApp的HTML元素上/script
/body在这里buttonComponent组件中在按钮渲染处定义了一个click事件但是click事件不是自己做而是父组件做因此它将click事件重命名为click-to-log传递出去(正常情况一般是click$emit(click)即不修改名称这里为了防止搞混专门把命名改成都不一样的了)。 父组件app收到后看到click-to-log事件需要一个控制台输出函数log于是在自己的methods中定义了一个log函数在控制台输出emit。
输出结果
点击按钮后控制台输出结果为
总结
本文旨在记录我自己学习期间遇到的问题并非教学所以只写了最最简单的应用和我自己的理解并没有深挖其原理。
