vue组件之间通信可分为以下几种
- props和$emit(也就是常说的父子组件通信,常用)
- $attrs和$listeners
- 中央事件总线(非父子组件间通信)
- v-model
- provide和inject
- $parent和$children
- vuex
1.props和$emit(常用)
Vue.component('child',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
`,
props:['message'],//设置props属性值,得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件,向父组件传值
this.$emit('getChildData',val)
}
}
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<child :message="message" v-on:getChildData="getChildData"></child>
</div>
`,
data(){
return {
message:'hello'
}
},
methods:{
//执行子组件触发的事件
getChildData(val){
console.log(val)
}
}
})
在上面的例子中,有父组件parent和子组件child。
1).父组件传递了message数据给子组件,并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件;
2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件
2.$attrs和$listeners
Vue.component('C',{
template:`
<div>
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec