vue之事件总线(EventBus)慎用

本文详细介绍了如何使用EventBus实现Vue组件间的通信。通过创建一个全局的事件总线实例,可以在不同组件之间方便地传递数据。在组件销毁时记得解除监听,以防止内存泄漏。发送消息和监听接收消息的示例代码也一并给出,帮助开发者理解其工作原理。
摘要由CSDN通过智能技术生成

通常适用于兄弟组件传值
最好规划好作用范围
- 通过实例控制范围(不同范围不同实例)
- 通过命名空间控制范围(不同范围共享同一实例)

新建event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

在局部组件引入

import { EventBus } from "/src/event-bus.js";

注意,在组件销毁时需要先进行关闭监听!

beforeDestroy() {
    EventBus.$off("aMsg", {});
  },

发送消息:

     EventBus.$emit("aMsg", this.average.motionSizeStatus);

监听接收消息

 mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.motionSizeStatus = msg;
      // this.msg = msg;
    });
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百事可口

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值