目录
组件的自定义事件
自定义事件说的直白点就是在组建中进行通信的一种方式，就是子组件向父组件传递参数
定义本文下方提到：A组件定义为父组件，B组件定义为子组件
使用场景
如果B组件想给A组件传递数据的话，那么就需要在A组建中和B组件绑定上自定义事件（事件的回调需要留在A组建中）
绑定事件
绑定时间分为两种形式，如下：
1、在A组件中：<Student @自定义事件名称=“demoTest”/>或者<Student v-on:自定义事件名称=“demoTest”/>
2、在A组件中：
<Student ref="demoTest"/>
……
mounted(){
this.$refs.xxx.$on{'自定义组件名称',this.demoTest}
}
注意：如果我们想让自定义事件仅仅只能够触发一次的话，那么可以使用到之前将的once修饰符，或者使用之前讲到的$once方法进行限制即可了
触发事件
如何进行触发自定义的时间呢？其实也很简单，如下语句即可；
this.$emit('自定义事件名称',数据)
解绑事件
怎么解绑自定义事件就更简单了，一句话解决，如下：
this.$off('自定义事件名称')
总结注意点：
1、组件上也是可以绑定我们原生DOM事件的，只需要使用上native修饰符即可
2、如果我们通过this.$refs.xxx.$on('自定义事件名称',回调)来绑定自定义事件的时候，一定要注意，回调要配置在methods中，或者是直接使用箭头函数。如果采用上面两种方式的话娿，会出现this指向错误。
全局事件总线
它又被叫做GlobalEventBus，他是一种组件与组件间通信的一种方式，他就是为任意组件之间通信而设计的。
安装全局总线
new Vue({
……
beforeCreate(){
// 这就是安装了全局总线的配置，这其中的$bus就是当前应用的vm
Vue.prototype.$bus=this
},
……
})
使用事件总线
提供数据
this.$bus.$emit('xxxx',数据）
接收数据
A组件如果想要接收数据，那么就在A组件中给$bus绑定自定义事件，并且事件的回调留在A组件中
methods(){
方法名(data){
……
}
}
……
mounted(){
this.$bus.$on('xxxx',this.上方的方法名)
}
注意：
这里要注意的是要及时解绑
在beforeDestroy的钩子中使用，用$off去解绑当前组件中所有用到的事件
消息的订阅与发布
我们可以理解消息订阅与发布就是全局总线的一种实现方式，他就是组件之间通信的一种方式，也是适用于任何组件见得通信的。
不过需要借助第三方组件库，这里使用pubsub.js
使用步骤
1、安装pubsub组件库
npm i pubsub-js
2、引入pubsub
import pubsub from ‘pubub-js’
3、接收数据
A组件中如果想接受数据，那么就需要在A组建中订阅消息，订阅消息的回调也需要留在A组件的身上
methods(){
msg(data){……}
}
……
mounted(){
// 这里是订阅消息
this.pubId = pubsub.subscribe('xxxx',this.msg)
}
4、发送数据
pubsub.publish('xxxx',数据)
5、取消订阅
和全局总线一样，我们一定记得要取消对消息的订阅
在beforeDestroy的钩子中，用PubSub.unsubscribe(pubId)来进行取消订阅的动作。
好了，今天关于事件与消息就到这里。
欢迎大家点击下方卡片，关注《coder练习生》
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
