实现一个vue插件Bus

plugins/bus.js

class Bus {
    constructor(){}
    emit(){}
    on(){}
}

Bus.install = function (Vue) {
    Vue.prototype.$bus = new Bus();
}

export default Bus

在main.js里面

Vue.use(Bus)

混入一下,复用方法

export default {
  methods: {
    dispatch(eventName, data) {
      let parent = this.$parent;
      // 查找父元素
      while (parent) {
        // 父元素用$emit触发
        parent.$emit(eventName, data);
        // 递归查找父元素
        parent = parent.$parent;
      }
    },
    boardcast(eventName, data) {
      boardcast.call(this, eventName, data);
    }
  }
};

function boardcast(eventName, data) {
  this.$children.forEach(child => {
    // 子元素触发$emit
    child.$emit(eventName, data);
    if (child.$children.length) {
      // 递归调用，通过call修改this指向 child
      boardcast.call(child, eventName, data);
    }
  });
}

使用

import emmiter from "@/mixins/emmiter";
export default {

  mixins: [emmiter],
 
  methods: {
    onInput(e) {
        this.dispatch("validate");
    }
  }
};