在vuejs里面组件间的通信有如下几类：
- 父子通信（一级嵌套）
- 子父通信（一级嵌套）
- 爷孙通信 (属性传递)
- 孙爷
- 兄弟通信（公共的父级）
- 叔侄通信
父子（父到子，子到父）
可参考我之前写过的
//www.greatytc.com/p/2f236e7a6be6
爷父子之间传递
值得注意的是，由于数据是单向数据流，所以只能从
爷组件===>(属性传递)父组件
父组件===>（属性传递）子组件
子组件===》(事件传递)父组件
父组件===》(事件传递)爷组件
以下要注意：
- 爷爷，爸爸私有变量应该在自己对象中定义data，而不是在实例化的vue共享的data里面。在自己定义对象中的data，一定是以函数形式，并且返回的是对象。
- 假设爷爷要把私有属性给粑粑，就要在爷爷的template的特征描述那里，定义爸爸标签时候绑定一个值
template:`<div style="border:5px solid red;"><h1>爷爷组件私有{{yeyemoney}} </h1><father :yeyeMon="yeyemoney" ></father></div>`
比如这个在father标签:yeyeMon绑定了这个，相当于给粑粑一个yeyeMon账户，里面放着yeyemoney这个私有属性，而粑粑实例那里就要注册这个账户
props:['yeyeMon'],
就可以拿到爷爷的私有变量了。
- 假设爸爸要给爷爷发送消息，那就要通过事件触发了。就要在爸爸实例那里的template添加一个摁扭，绑定一个函数
<button @click="fatherTokenyeye">爸爸给爷爷回复消息</button>
同时爸爸还会自定义一个函数fatherTokenyeye，
fatherTokenyeye:function () {
this.$emit('listenFather','爷爷你好啊我是爸爸')
}
这个函数会分发一个监听器listenFather给爷爷，同时将想要表达的话发送过去。
爷爷事先就要在爸爸子标签订阅这个监听器
<father :yeyeMon="yeyemoney" @listenFather="handlefather"></father>
然后通过handlefather函数处理所穿过来的消息，显示在自己组件上。
data:function(){
return {
yeyemoney:1000000000,
fatherMessage:''
}
},
methods:{
handlefather:function (data) {
this.fatherMessage=data
}
},
爷爷最后将data渲染到页面就好了
template:`<div style="border:5px solid red;"><h1>爷爷组件私有{{yeyemoney}} 来自爸爸的问候：{{fatherMessage}}</h1><father :yeyeMon="yeyemoney" @listenFather="handlefather"></father></div>`
兄弟通信
这里可以用eventBus空的vue实例对象。
var EventBus = new Vue();
注册好两个兄弟组件
var vm = new Vue({
el: '#box',
components: {
bigBrother,
littleBrother,
}
});
在box实例化vue管辖位置调用两个兄弟组件
<div id="box">
<!--书写 vuejs 代码-->
<!--兄弟间的通信： 平级-->
<big-brother></big-brother>
<little-brother></little-brother>
</div>
具体书写两个属性的组件特征,首先是小弟与大哥通信
var littleBrother = {
methods: {
clickHandler: function () {
EventBus.$emit('getmessagefromlittlebrother', '大锅，你好!');
}
},
template: `
<div>
<h1>小弟</h1>
<button @click="clickHandler">向大锅问好</button>
</div>
`
}
此时添加一个摁扭，绑定一个点击事件
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: `
<div>
<h1>大哥</h1>
<p>来自小弟的问候：{{ message }}</p>
<button @click="clickHandler">给小弟的回复</button>
</div>
`
}
通过总线EventBus来订阅$on这个getmessagefromlittlebrother监听器，并且初始化data以后，监听器也会传过来小弟组件发送过来的信息。
值得注意的是，这里的订阅信息，要用到生命周期函数created，已加载完就要监听。
同理大哥要向小弟传递信息也是如此
<script>
// 三部曲：1. 实例化一个 Vue 实例对象 2. 在需要接收数据的地方进行事件的监听(被动)（事件的名称完全用户自定义，不要系统的传统） 3. 在需要传递数据的地方触发第二步定义的事件(主动)
var EventBus = new Vue(); // 事件车
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: `
<div>
<h1>大哥</h1>
<p>来自小弟的问候：{{ message }}</p>
<button @click="clickHandler">给小弟的回复</button>
</div>
`
}
var littleBrother = {
data: function(){
return {
message: '',
}
},
//吃了吗？ 叶问：吃了吗？
created: function(){
// 小弟监听
EventBus.$on('getmessagefrombigbrother', (data) => {
this.message = data;
console.log(data);
});
},
methods: {
clickHandler: function () {
EventBus.$emit('getmessagefromlittlebrother', '大锅，你好!');
}
},
template: `
<div>
<h1>小弟</h1>
<p>来自的回复：{{ message }}</p>
<button @click="clickHandler">向大锅问好</button>
</div>
`
}
// 小弟(主动：发送)向大哥（被动：接收）问好（兄弟通信）。 电影：大哥大嫂过年人
// 32位（32根电线 2^32 = 4G 4G内存） 64位（ 2^64 寻址：4G的4G = 42个亿个4G）
// vuejs 提供 eventBus 事件车 Bus: 总线（1. 地址 2. 数据 3. 指令 数字：01 高低电平）
var vm = new Vue({
el: '#box',
components: {
bigBrother,
littleBrother,
}
});
</script>
