Vue全局事件总线(任意组件之间通信)
程序员文章站
2024-03-15 08:22:35
...
vue组件中如果要通信,一般是通过父组件监听,然后再操作,这样比较繁琐,可以利用全局事件总线来实现。
A组件要触发B组件的事件:
先要绑定全局事件总线的变量
main:
new Vue({
router,
store,
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线 此时的this指向Vue 可以使用vue里面的方法 如$on $emit
}
}).$mount('#app')
//A组件:
<button @click="allchang">全局组件事件</button>
methods:{
allchang(){
this.$bus.$emit('hello',this.name) //触发原型上面的hello事件
}
},
//因为只有一个原型 如果命名重复的话 会造成不良的后果 所以一定要避免 开发中一定要写明
//B组件
methods:{
allhellos(name){
console.log('我是全局事件',name);
},
},
mounted(){
this.$bus.$on('hello',this.allhellos)
},
//因为只有一个原型 如果命名重复的话 会造成不良的后果 所以一定要避免 开发中一定要写明
//可以通过beforeDestroy函数进行销毁 但是也要注意命名冲突的问题
beforeDestroy(){
this.$bus.$off('hello') //记得写上销毁事件的名称 不然会全部销毁
}
也可以通过pubsub-js插件来实现消息的发布与订阅
安装pubsub插件 组件内引入 发布订阅都要导入
import pubsub from 'pubsub-js'
//发布消息组件
methods:{
//插件库发布消息
pubsubchang(){
pubsub.publish('hello',this.name)
}
}
//订阅消息组件
methods:{
hellopubsub(msg,data){ //第一个参数为事件名称 第一个是数据
console.log('我是全局事件',msg,data);
},
},
mounted(){
//插件库订阅消息
this.pubId = pubsub.subscribe('hello',this.hellopubsub)
},
//注销
beforeDestroy(){
pubsub.unsubscribe(this.pubId)
}
上一篇: java 中 十进制与二进制的互相转换
下一篇: vue 组件之间通信