vue组件之间的数据传递方式（event bus）事件总线

最新推荐文章于 2025-04-27 20:28:36 发布

大白兔i

最新推荐文章于 2025-04-27 20:28:36 发布

阅读量452

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_44956916/article/details/119568892

笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何通过在Vue应用的main.js中创建事件总线，让子组件能修改并同步爷爷组件的值。通过实例演示了如何在孙子组件触发删除操作，参数传递以及在爷爷组件的响应逻辑。同时，还强调了在监听结束时移除事件监听的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题场景：子组件想要修改爷爷组件的值，同时把自己展示的也改掉，这可愁坏了我，头发又没3根
解决办法：
1.在项目的main.js文件中，注册事件总线

export const bus = new Vue()

2.在孙子组件中注册事件，并且将参数传递过去

// 引入事件总线
import {bus} from "../../../../main.js"
bus.$emit("onDelete",{Accounting,orderId:this.orderId})

3.在爷爷组件中接受事件，接收参数

bus.$on("onDelete", async ({Accounting,orderId})=>{
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        let formData = new FormData();
        console.log("error", Accounting);
        formData.append("financial_code", Accounting.financialAccount.code);
        let res = await httpPostFormData(
          `/plan/${orderId}/accounting_products/delete`,
          formData
        );
        console.log("-----删除accounting--", res);
        loading.close();
        this.$message.success("价格删除成功");
        this.editOrder.plan = res.data.queryPlan
      } catch (err) {
        loading.close();
        console.log(err);
      }
    })


4.在监听的地方，还要移除事件的监听


beforeDestroy() {
    bus.$off("onDelete",{});
  },


总结：这个事件总线不会拘泥于组件之间的关系，好用