vue非父子/非兄弟组件通信bus发布/订阅者模式

使用背景如下图

二级菜单为一级菜单的子路由，二级菜单加载M组件

业务逻辑：

一级菜单中有一个功能按钮，点击按钮可以改变状态state,组件M根据按钮状态state加载数据

实现思路，使用事件总线，发布/订阅者模式

1.  创建一个公共的Vue实例

     

    新建一个bus.js,导出实例

import Vue from "vue";
export default new Vue();

  导入到一级路由中

import Bus from 'js/Bus.js';

2. 点击按钮的时候发布一个事件 msg

   HTML部分

         <span id="btnBox"
                @click="statechange(state)">
            <img :src="state_url"
                 alt="">
            <span id="state_font">{{value}}</span>
          </span>

  methods

// 改变状态
    statechange (id) {
      // 如果是处理中
      if (id === 0) {
        this.state = 1;
        this.url = require("../assets/images/pause.png");
        this.value = "暂停中";
        Bus.$emit('msg', this.value);
      }
      // 如果是暂停中
      if (id === 1) {
        this.state = 0;
        this.url = require("../assets/images/icon-ok-green.png");
        this.value = "处理中";
        Bus.$emit('msg', this.value);
      }
    },

3. M组件中订阅事件

   导入     import Bus from '/js/Bus.js';

mounted () {
    Bus.$on('msg', e => {
      // 如果是处理中就调用
      if (e === '处理中') {
        this.getTaskList(1);
      }
    });
  },

以上使用事件发布/订阅实现了，非组件通信问题