親コンポーネントはVue.jsの子コンポーネントとどのように通信できますか？

Question

これは私が持っているものです。

​​

outerコンポーネントはsearch-inputとmenuコンポーネントが含まれています。ユーザがouterコンポーネントに検索を実行

は

、私はそれがベース自体をフィルタリングすべきであると言っmenuコンポーネントに通信することができる限り、menuコンポーネントのメソッドを呼び出す、またはイベント、または何を放出する必要があります新しい基準で

子コンポーネントのメソッドを呼び出すのは、で、私はイベントを使うべきではないと読んでいます。私は今、docsを見ていますが、私は親に話す子供の例を見ることができます。

検索条件の変更に合わせてメニューコンポーネントと通信するにはどうすればよいですか？

EDIT

いくつかのブログの記事によると、そこに子コンポーネントに話をすることを目的と$broadcast方法であるために使用されるが、それについてのドキュメントは、ちょうど消えました。これは以前のURL：http://vuejs.org/api/#vm-broadcast

Answer 1

慣例は「props down, events up」です。データは、小道具を経由して、子コンポーネントに親から流れて、あなたは多分、メニューに小道具を追加することができます。searchTermに基づくことになる

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

フィルタリングシステムを（私はそれが計算されます推測している？）、そしてだろう変更されるたびに更新されます。

コンポーネントのシステムが大きくなると、コンポーネントの多くのレイヤーでデータを渡すのが煩雑になることがあります。中央ストアの種類が一般的に使用されます。

Answer 2

はい、$broadcastは2.xで非推奨になりました。機能の置き換えに関するいくつかのアイデア（イベントハブまたはVuexを含む）については、Migration guideを参照してください。

Answer 3

また、そのような単純なストアを作成することもできます。

まず、という新しいファイルを作成してみましょう。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) 
    } 
} 

のようにそれを呼び出すことができますし、右の$放送と$発送は@Royを明確にして