vueJS 兄弟组件相互传数据 所遇到的坑 $emit 传递数据 $on接受到但无法使用的问题

新手写vue项目  一不小心就掉到坑坑里 ，还好，我还能上来 。废话不必说，拉你出坑。

网上有太多 父组件----->子组件、子组件------>父组件。

今天就说 兄弟组件A、B相互的通信  怎么实现。

1、首先先创建文件VueEvent.js 里面一个vue实例

vueEvent.js

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

然后就可以通过import 方式 引入到你的组件去

import VueEvent from "../common/js/VueEvent.js";

2、组件A

let that = this;//最重要的一步

 created() {
    let that = this;//最重要的一步
    VueEvent.$on("applyInfoData", function(val) {
      that.applyData = JSON.parse(JSON.stringify(val));
      console.log("兄弟组件传值=", that.applyData);
    });
     console.log("=", this.applyData);
   
  },

3、组件B

 VueEvent.$emit("applyInfoData",data);  //$emit这个方法会触发一个事件

注意this的指向 不然$on接受到但无法使用的问题