相信很多人都知道解決組件間通信：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;}}// 遞歸遍歷子節點，找到componentNamelet 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 組件代碼

?

最后效果：

?

轉載于:https://www.cnblogs.com/Kummy/p/9496763.html

總結

以上是生活随笔為你收集整理的vue-自主研发非父子关系组件之间通信的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。