目录
组件的自定义事件
自定义事件说的直白点就是在组建中进行通信的一种方式,就是子组件向父组件传递参数
定义本文下方提到: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练习生》