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