從父母到孩子的廣播事件在Vue.js中觸發所有父母的孩子

Question

我有一個父組件和一個子組件。 在我父組件我有一個span事件：

<span @click="toggle(model.id)" class="open-folder">[{{open ? '-' : '+'}}]</span> 

這將觸發toggle功能

methods: { 
     toggle: function(id_epic) { 
      this.open = !this.open; 

      this.$broadcast('loadTasks', id_epic); 
     } 
    }, 

這個功能我稱之爲從子組件的loadTasks法id_epic參數。

父母可以有n孩子與它聯繫在一起，但我只想解僱第一個子方法而不是全部。 當我點擊跨度時，會觸發父母樹的所有n孩子的事件。

編輯：父母和它的孩子們遞歸產生，因此孩子也可以在它自己的父（就像一個文件夾結構）

我怎樣才能解決這個問題？ 謝謝。

Answer 1

$broadcast用於將事件發送給子組件。在您的父組件中，您將觸發toggle方法中的事件loadTasks。這很好。

你在你的子組件沿事件發送parameter，你的情況id_epic

現在，你需要這樣的事情。您需要獲取您在子組件中發送的id。

events : { 
    'loadTask' : function(param) { 
       //check for the id_epic here 
    } 
} 

編輯：父母和它的孩子們遞歸產生，因此孩子也可以在它自己的父（就像一個文件夾結構）

你也應該重新思考。那部分，如果你有太多的嵌套組件，事情可能會輕易失控。

Answer 2

您可以嘗試使用this.$children[0].$emit()將事件發送到第一個子實例。儘管可能會更好地使用更明確的方案，並讓孩子向父母註冊處理程序，反之亦然。

Answer 3

您應該能夠通過使用子偵聽器中的第二個參數來停止事件的傳播。第二個參數傳遞給您可以調用stopProgation()的事件對象，並阻止其他孩子也接收廣播的事件。

考慮將以下代碼添加到您的子偵聽器。

events:{ 
    'loadTask': function(param,event){ 
     event.stopPropagtion(); 
     // Handle the param as needed. 
    } 
} 

當然本系統的事件處理是隻對Vue.js 1.0如Vue.js 2.0+事件廣播和調度已經有利於數據存儲器的貶值如Vuex。所以你可能要考慮使用一種將升級兼容的方法。