vue-自主研發非父子關係組件之間通訊的問題

相信不少人都知道解決組件間通訊：vuex，今天的主角不是它。

element-ui裏解決組件間通訊的思路：emitter.js ，可是若是你拿來你會發現它解決的是父子組件之間的通訊問題。若是咱們通訊的組件不是父子關係，emitter.js 就不能作到了。

首頁，仍是要借鑑前人(emitter)的思路。其實vuex也能夠用狀態來解決這個問題，我以爲能夠不必定要依賴vuex，並且走store繁瑣。

咱們的需求就是非父子關係之間簡單的事件通訊

 

現實項目中的一個需求，在「庫位列表」的頁面操做，通知菜單「庫位列表」裏的事件。

 

咱們再看看，頁面組件渲染圖，elmenu 和  stockposition 發現它們並非父子關係，可是它們的共有父親節點是ElContainer，這是咱們的突破口：

 

方案實現思路：咱們先找到父親節點，我定義尋找的父親節點：app，而後遞歸遍歷子節點，找到通訊目標組件，直接上代碼 emitter.js：

export default {
    methods: {
      dispatchComponent(componentName, eventName, params) {
        var parent = this.$parent || this.$root , com = null;
        var name = parent.$options.name;
        
        // 找到頂級app父親節點
        while (parent && (!name || name !== componentName) && name!="app") {
          parent = parent.$parent;
  
          if (parent) {
            name = parent.$options.name;
          }
        }
        
        // 遞歸遍歷子節點，找到componentName
        let recursiveChild = (parent) => {
            parent.$children.filter(child=>{
                if(child.$options.name==componentName) {
                  com = child;
                } else {
                  recursiveChild(child);
                }
            })
        }
        
        recursiveChild(parent);
       
        if (com) {
          com.$emit.apply(com, [eventName].concat(params));
        }
      }
    }
}

 

elmenu.vue 組件代碼

 

 

 

stockposition.vue 組件代碼

 

最後效果：