vue bus触发$emit 监听$on 关闭$off传值

最新推荐文章于 2025-10-06 05:52:17 发布

原创最新推荐文章于 2025-10-06 05:52:17 发布 · 5.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一种使用Vue实例作为事件总线实现组件间通信的方法。通过在main.js中引入并暴露bus实例，允许不同组件注册监听事件和发射事件，从而实现跨组件的数据传输。文章详细展示了如何在a.vue和b.vue组件中利用Bus实例进行事件监听和事件触发，完成数据的传递。

// bus.js文件
import Vue from 'vue';
export default new Vue;

// main.js文件
**** // 原有的数据
**** // 原有的数据
import bus from '@/bus.js';
Vue.prototype.Bus = bus;

//a.vue 
...
 beforeCreate(){
    Bus.$on("this_change",[1,2])
 }
....
//b.vue
...
created(){
    Bus.$emit("this_change",(em) => {
        //这样就可以打印出来刚刚传过来的1和2了
        console.log(em[1],em[2]); 
    });
}，
beforeDestroy(){
    //最后不要忘了删除传输事件
    Bus.$off("this_change")