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钩子中取消订阅