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

Question

這就是我所擁有的：

<div id='vnav-container'>
    <input type="text" v-model="searchTerm" v-on:keyup="search" class="vnav-input">
    <menu :items="menu"></menu>
</div>

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

當用戶在outer組件上執行搜索時，我需要在menu組件上調用一個方法，或者發出一個事件，或者其他什么，只要我可以與menu組件通信，說它應該根據新標准過濾自己.

我在某處讀到不鼓勵在子組件上調用方法，我應該使用事件。 我現在正在查看文檔，但我只能看到一個孩子與父母交談的例子，而不是相反。

當搜索條件發生變化時，我如何與菜單組件進行通信？

編輯

根據一些博客文章，曾經有一個$broadcast方法旨在與子組件對話，但關於它的文檔剛剛消失。 這曾經是 URL： http : //vuejs.org/api/#vm-broadcast

Answer 1

慣例是“道具向下，事件向上”。 數據通過 props 從父組件流向子組件，所以你可以在菜單中添加一個 prop，也許：

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

過濾系統（我猜它是計算出來的？）將基於searchTerm ，並且會在它發生變化時更新。

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

Answer 2

是的， $broadcast在 2.x 中已被棄用。 有關替換功能（包括事件中心或Vuex ）的一些想法，請參閱遷移指南。

Answer 3

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

首先，讓我們創建一個名為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)
   }
}

你是對的 $broadcast 和 $dispatch 在 VueJS 2.0 中被棄用