组件
组件实际上就是自定义元素,是高级自定义的html代码元素,是可复用的Vue实例
既然也算是实例,那组件内部也可以有data,computed,watch等,不一样的是el是根实例特有的,还有组件中的data必须是一个函数,这样才能实现组件的复用性,每个组件才能是独立的。
创建组件
组件最主要的部分就是data还有template模板,
data必须是一个函数,上方阐述过
template是模板,是你要放在组件里的内容
在下面代码中,我们创建了一个叫myCom的组件
let myCom = {
data() {
return {
comMsg: "组件数据"
}
},
// 模板
template: `
<div>
<span>{{comMsg}}</span>
<span>{{comMsg}}</span>
<button @click="comMsg='新数据'">更改数据模型中的数据</button>
</div>
`
};
注册组件
声明一个组件完毕后我们需要声明一下组件,这样才能使用
注册组件又有全局注册和局部注册,概念和函数类似,全局声明,那么全局任何地方都能使用该组件,如果是局部声明,那只能在局部使用该组件,外部不能使用。
全局注册虽然方便,但是十分的占资源,所以在大的项目中建议局部注册,哪里使用到哪里就局部注册
全局注册组件
Vue.component('my-com', myCom);
局部注册组件
在b组件内注册了a组件
let myComB = {
// 局部注册A组件
components: {
"my-com-a": myComA
},
template: `
<div>B组件
<my-com-a></my-com-a>
</div>
`
}
使用组件
上方声明并注册了myCom组件,那么我们可以像使用html标签一项使用该组件
下方使用了三个myCom组件,它们内部虽然都一样,但都是相互独立的
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
组件通信 父子之间传值
因为组件是可以嵌套的,那么就会有父给子传数据还有子给父传数据两种情况
- 父组件通过prop给子组件传递数据
父组件可以将数据作为自定义属性一样将数据传递到props中
<my-com title="" :msg="msg" attr-a=""></my-com>
props写在子组件内,注册一下父亲要传的数据
{
props:['title','msg','attrA'],
template:`
<div>
<span>子组件内部数据:{{comMsg}}</span>
<br/>
<span>父组件数据:{{title}}--{{staticAttr}}</span>
<button @click="comMsg='新数据'">更改数据模型中的数据</button>
<button @click="toEmit">发射数据</button>
</div>
`
}
这样,子组件在接收到父组件传到props里的数据以后就可以在模板里使用了
- 子组件给父组件传递数据
子组件给父组件传数据要写一个自定义事件,将数据发射给父元素
第一步,我们先写一个事件按钮在子组件的模板内,绑定toEmit事件
// 模板
template: `
<div>
<button @click="comMsg='新数据'">更改数据模型中的数据</button>
<button @click="toEmit">发射数据</button>
</div>
`,
第二步,我们在子组件的methods中写toEmit函数,调用该函数是触发my-event事件处理程序,后面跟着的是要发送的参数
methods: {
toEmit() {
// 发射 参数:自定义事件名称,事件处理程序的实参(发射的数据)
this.$emit('my-event', this.comMsg, 100);
}
}
第三步,在my-com标签中绑定my-event事件处理程序,来调用父组件的myEventHandle函数
<div id="app">
{{msg}}
<my-com @my-event="myEventHandle" :title="msg" static-attr="父组件给子组件的静态数据"></my-com>
</div>
第四步,在父组件(这里的额父组件就是vue实例)的methods中写myEventHandle函数
methods: {
// my-event的事件处理程序
myEventHandle(a, b) {
console.log(a, b, '----');
}
}
点击button,让子组件给父组件发射数据,父组件在使用方法使用该数据。
总结:父传子是通过属性传值,子传父是通过事件传值