父組件如何與Vue.js中的子組件通信？

的outer組件包含一個search-input和menu組件。

當用戶執行的outer部件上的搜索，我需要調用一個方法的menu部件上，或發出一個事件，或任何的，只要我能向menu組件通信說應該基於過濾器本身在新的標準。

我讀過一些地方，調用兒童組件的方法是不鼓勵，我應該使用事件。我現在正在查看docs，但我只能看到一個孩子與父母交談的例子，而不是其他方式。

隨着搜索條件的變化，我該如何與菜單組件通信？

編輯

據一些博客文章，曾經有一個$broadcast方法意在交談中的子組件，但關於剛剛消失的文檔。這曾經是網址：http://vuejs.org/api/#vm-broadcast

約定是「props down, events up」。從父母通過道具子組件的數據流，所以你可以一個道具添加到菜單，也許：

<menu :items="menu" :searchTerm="searchTerm"></menu>

過濾系統（我猜這是一個計算的？）將基於searchTerm，並會每當它改變時更新。

當組件系統變大時，將數據傳遞通過多層組件可能會很麻煩，並且通常使用某種中央存儲。

2016-10-04 20:16:52

這是澄清@Roy已被棄用。我來自React。問題：

將由於searchTerm變化而自動重新渲染？ –

是的，道具與數據項目一樣具有反應性，所以Vue會根據情況重新渲染。 –

是的，$broadcast在2.x中已棄用。有關替換功能（包括事件集線器或Vuex）的一些想法，請參閱Migration guide。

2016-10-04 18:54:34 PatrickSteele

或者您可以爲此創建一種簡單的商店。

首先，讓我們創建名爲searchStore的新文件。JS它只是VanillaJS對象

export default { 

    searchStore: { 
     searchTerm: '' 
    } 


}

然後在文件你在哪裏使用這個商店，你必須將其導入

import Store from '../storedir/searchStore'

然後在你的組件，你想過濾數據，你應創建新的數據對象

data() { 
    return { 
     shared: Store.searchStore 
    } 
}

關於方法 - 你可以把方法在你的店，這樣

doFilter(param) { 
    // Do some logic here 
}

隨後又在你的組件，你可以這樣調用

methods: { 
    search() { 
     Store.doFilter(param) 
    } 
}

而且你是正確的$廣播和$派遣VueJS 2.0

2016-10-05 07:08:07

回答