vue全局事件总线

首先在main.js中app实例中使用生命周期钩子添加组件

    new Vue({
        router,
        render: h => h(App),
        beforeCreate() {
            Vue.prototype.$bus=this;  //安装事件总线
        },
    }).$mount('#app')    

然后在创建的组件添加自定义事件

  this.$bus.$on('nihao',(data)=>{console.log('收到的数据'+data)})

调用事件总线中的自定义事件

  this.$bus.$emit('nihao',123)

PS:在绑定自定义事件的组件内在销毁前解绑自定义事件

    beforeDestroy() {
        this.$bus.$off('nihao')
    },

 

posted @ 2022-03-16 21:15    阅读(296)  评论(0编辑  收藏  举报