vue之事件总线(EventBus)慎用

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

新建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;
    });
  },

猜你喜欢

转载自blog.csdn.net/qq_38594056/article/details/120745114