eventBus 同级组件/多级组件之间传值问题解决

果果ha

于 2020-11-15 23:47:23 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/cuteyDan/article/details/109712204

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用EventBus进行组件间通信，包括初始化全局EventBus、事件触发与监听的方法，并提供了实例代码。通过EventBus简化了父子、同级组件间的传值问题。

同级组件/多级组件之间传值问题解决：eventBus

1⃣️ 初始化：

方法一：只创建实力方法，较轻便

方法二：全局的事件总线

直接在项目中的mian.js初始化EventBus：

// main.js
Vue.prototype.$EventBus = new Vue();

使用总结：

// 发送消息
bus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
bus.$on(channel: string, callback(payload1,…))

//移除监听
bus.$off(channel: string);

2⃣️ 触发事件：

import bus from "./bus.js";
// 同父子组件传值
bus.$emit("ldap-setting-active", value);

3⃣️ 监听事件：

import bus from "./bus.js";

mounted() {
    bus.$on("ldap-setting-active", value => {
        console.log(value);
    })
}
// 移除事件
beforeDestroy() {
     bus.$off('update-delete');
}