Vue中组件通信（eventBus）

Posted 2023-05-04

参考技术A 在vue项目中，父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯，就会比较麻烦。这时，使用eventBus通讯，就可以很便捷的解决这个问题。
eventBus可以在全局定义，实现全项目通讯，使用方法也很简单。
使用方式：
1、初始化——全局定义
全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

2、监听事件

3、触发事件

4、移除监听事件
为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。

Vue实现非父子组件通信

Vue非父子组件传值

这种情况，就需要自己定义一个eventbus，如下

1.自己定义bus，新建一个eventbus.js文件

import Vue from 'vue';
var bus = new Vue();
export default bus

2.在非父子组件导入

import bus from "../eventbus.js";

类似子组件向父组件传值，定一个方法，利用emit

   emitOne() 
      bus.$emit("to_two", 111);
    ,

这里的区别是，子组件用的this，这里用的是eventbus.js导入的对象，而不是自身的对象

在mounted钩子方法中

 mounted() 
    console.log('mounted');
    bus.$on("to_one", val => 
      this.msg = val;
        console.log('组件1接收： '+this.msg);
    );
  ,

利用bus.$on来设置要监听的方法，通过它获取值

对于简单的组件间传值可以利用一个公共的js来操作，更复杂的状态管理通过vuex来实现，vuex定义了state，getter，mutations，actions等，分别对应数据，数据动态计算，同步方法，异步方法等，后续在讨论吧