在vuejs里面组件间的通信有如下几类:
- 父子通信(一级嵌套)
- 子父通信(一级嵌套)
- 爷孙通信 (属性传递)
- 孙爷
- 兄弟通信(公共的父级)
- 叔侄通信
父子(父到子,子到父)
可参考我之前写过的
https://www.jianshu.com/p/2f236e7a6be6
爷父子之间传递
值得注意的是,由于数据是单向数据流,所以只能从
爷组件===>(属性传递)父组件
父组件===>(属性传递)子组件
子组件===》(事件传递)父组件
父组件===》(事件传递)爷组件
以下要注意:
- 爷爷,爸爸私有变量应该在自己对象中定义data,而不是在实例化的vue共享的data里面。在自己定义对象中的data,一定是以函数形式,并且返回的是对象。
- 假设爷爷要把私有属性给粑粑,就要在爷爷的template的特征描述那里,定义爸爸标签时候绑定一个值
template:`爷爷组件私有{{yeyemoney}}
`
比如这个在father标签:yeyeMon绑定了这个,相当于给粑粑一个yeyeMon账户,里面放着yeyemoney这个私有属性,而粑粑实例那里就要注册这个账户
props:['yeyeMon'],
就可以拿到爷爷的私有变量了。
- 假设爸爸要给爷爷发送消息,那就要通过事件触发了。就要在爸爸实例那里的template添加一个摁扭,绑定一个函数
同时爸爸还会自定义一个函数fatherTokenyeye,
fatherTokenyeye:function () {
this.$emit('listenFather','爷爷你好啊我是爸爸')
}
这个函数会分发一个监听器listenFather给爷爷,同时将想要表达的话发送过去。
爷爷事先就要在爸爸子标签订阅这个监听器
然后通过handlefather函数处理所穿过来的消息,显示在自己组件上。
data:function(){
return {
yeyemoney:1000000000,
fatherMessage:''
}
},
methods:{
handlefather:function (data) {
this.fatherMessage=data
}
},
爷爷最后将data渲染到页面就好了
template:`爷爷组件私有{{yeyemoney}} 来自爸爸的问候:{{fatherMessage}}
`
兄弟通信
这里可以用eventBus空的vue实例对象。
var EventBus = new Vue();
注册好两个兄弟组件
var vm = new Vue({
el: '#box',
components: {
bigBrother,
littleBrother,
}
});
在box实例化vue管辖位置调用两个兄弟组件
具体书写两个属性的组件特征,首先是小弟与大哥通信
var littleBrother = {
methods: {
clickHandler: function () {
EventBus.$emit('getmessagefromlittlebrother', '大锅,你好!');
}
},
template: `
小弟
`
}
此时添加一个摁扭,绑定一个点击事件
clickHandler,在clickHandler里通过总线EventBus来分发$emit一个监听器,这个监听器叫getmessagefromlittlebrother, 同时发送要和大哥组件通信的消息。
在另一个大哥组件中,就要订阅这个监听器,把收到的信息显示
var bigBrother = {
data: function(){
return {
message: '',
}
},
created: function(){
// 组件一加载的时候,大哥开始监听 $on(参数1监听事件的名称,用户自定义,参数2:回调函数,回调函数里面的data参数,就是触发这件事情的时候,传递的参数)
EventBus.$on('getmessagefromlittlebrother', (data) => {
console.log(data);
this.message = data;
});
},
methods: {
clickHandler: function () {
// 触发小弟监听的事件
EventBus.$emit('getmessagefrombigbrother', '吃了吗?');
}
},
template: `
大哥
来自小弟的问候:{{ message }}
`
}
通过总线EventBus来订阅$on这个getmessagefromlittlebrother监听器,并且初始化data以后,监听器也会传过来小弟组件发送过来的信息。
值得注意的是,这里的订阅信息,要用到生命周期函数created,已加载完就要监听。
同理大哥要向小弟传递信息也是如此