欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)
}


相关标签: VUE