Vue2 第十五节 组件间通信方式
1.组件的自定义事件
2.全局事件总线
3.消息订阅与发布
一.组件的自定义事件
1.1 绑定自定义事件
① 自定义事件就是一种组件间通信方式，用于子组件和父组件之间传递数据
② props来实现子组件给父组件传递数据
（1）先给父组件中绑定一个函数
（2）子组件中用props接收
（3）在子组件中调用这个方法
③ 绑定一个自定义事件
第一种写法：
（1）事件绑定(在父组件中绑定)
<Student v-on:atguigu="getStudentName" />
第二种写法：（更加灵活）
（1）使用ref的方式
<Student ref="student" />
④ 触发事件(在子组件中触发)
this.$emit('atguigu', this.name, 1, 2, 3)⑤ 自定义事件只想触发一次：
第一种方式写法：
<Student @atguigu.once="getStudentName" />第二种方式写法：
this.$refs.student.$once('atguigu', this.getStudentName)1.2 解绑自定义事件
① 解绑一个自定义事件
this.$off('atguigu')② 解绑多个自定义事件
this.$off(['atguigu', 'demo'])③ 解绑所有的自定义事件
this.$off()1.3 注意事项
① 通过 this.$ref.xxx.on('atguigu', 回调)绑定自定义事件时，回调要么配置在 methods 中，要么用箭头函数，否则 this 的指向会出问题，因为这个回调函数中的this指向的是触发这个事件的组件，并不是接收这个事件的组件
② 组件上也可以绑定原生DOM事件，需要使用native修饰符
<Student ref="student" @click.native="show" />二. 全局事件总线
① 组件间通信的一种方式，适用于任意组件间通信
② 安装全局事件总线
new Vue({
beforeCreate(){
Vue.prototype.$bus = this
},
})③ 事件总线接收数据
④ 事件总线解绑
⑤ 分发事件
三. 消息订阅与发布
① 消息订阅与发布是组件间通信的方式，适用于任意组件间通信
② 需要引入一个消息订阅与发布的第三方实现库：PubSubJS
下载： npm install -S pubsub-js
引入： import pubsub from 'pubsub-js'
③ 过程：订阅消息(对应绑定事件监听)， 发布消息（分发事件），取消消息订阅（解绑事件监听）
代码示例
（1）订阅消息
msg是消息名，data是数据
（2）发布消息
（3）取消订阅：最好在beforeDestroy钩子中取消订阅
