この記事は、編集者が公式文書と組み合わせて編集するより詳細で包括的なチュートリアルです。それは非常に優れており、初心者が読むのに適しています。
この記事は公式の文書からのものです。
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
親子コンポーネント通信
cultion子供コンポーネント、親コンポーネント、ルートコンポーネントにアクセスします。
これ。$親アクセス親コンポーネント
これ。$子供は子供のコンポーネントにアクセスします（アレイです）
これ。$ルートルートインスタンスの子孫がルートインスタンスにアクセスします
サンプルコード：
<div id = "app">親コンポーネント：<入力v-model = "val"> <br/>子コンポーネント：<test：test = "val"> </div> </div> <script> var vm = new vue（{el： '＃app'、data：{val：1}、コンポーネント：{test：{prop = 'find @key： v-model = 'test'/> "、method：{findparent：function（）{console.log（this。$ parent）; // rootコンポーネントコンソールにアクセスします。親コンポーネントとルートコンポーネントが一致しているかどうか（その親コンポーネントがルートコンポーネントであるため）}}}}}}）; </script>キーがサブコンポーネントの入力ボックスにポップアップすると、表示されている内容は次のとおりです。
親コンポーネントと親コンポーネントの入力ボックスの値（デフォルトは1）、0（親コンポーネントの子属性の最初の要素であることを表します）、およびtrue（親コンポーネントはルートコンポーネントであるため、合同です）。
このようにして、コンポーネントツリーで相互作用を実行できます。
②イベント：
まず、イベントは、メソッドプロパティ（初心者が犯す可能性が高い間違い）ではなく、イベントプロパティに配置する必要があります。イベントプロパティのイベントのみをトリガーできますが、メソッドプロパティのイベントはトリガーできません。
第二に、上向きの分布と下向きのブロードキャストには違いがあります。上向きの分布は同じ名前のイベントをトリガーしますが、下向きのブロードキャストはそうではありません。
第三に、上向きの分布と下向きのブロードキャストは、デフォルトで直接回線（子供または親を除く子供または親）のイベントのみをトリガーし、イベントの返品値が真でない限り、このラインで継続します。
第四に、このイベントはこれを通じて明示的に呼ぶことはできません。イベント名。
サンプルコード：
<div id = "app">親コンポーネント：<button @click = "parentclick">クリックして下向きにブロードキャスト</button> <br/>子コンポーネント1：<Children1> </children1> <br/>別の子供コンポーネント1：<別の子供1：<別の子供のコンポーネント1： {function（）{this $ broadcast（ "abc"）} {console.log（ "Childrenclick-parent"）返品値はありません。プロップは引き続き分布していません：['test']、テンプレート： "<butth> children1 </button> </br> subcomponent 2：<Children2> </children2>"、{ChildRenclick：function（）{console.log（ "Childrenclick-Children1"）; console.log（ "parentclick-children1"）; {Childrenclick：console.log（ "Childrick-children2"）、console.log（ "parentclick-children2"）;真実で、それは子供のコンポーネントの子どものコンポーネントにプロップを配布し続けます：['test']、テンプレート： "<button>別の子供コンポーネント2：<別の子供2> ParentClick：console.log（ "parent-anotherchildren1"）; {$ dispatch（ 'Childrenclick'）、{console.log（ "Childrenclick-anotherchildren2"）、console.log（ }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}ティー。 }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}ティー。 }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}ティー。 }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}。説明：
【1 dis親コンポーネントのボタンをクリックすると、下向きにブロードキャストし、子コンポーネント1、別の子コンポーネント1、および別の子コンポーネント2をトリガーします。
【2】子コンポーネント2のボタンをクリックすると、子コンポーネント2のイベントと子コンポーネント1のイベントがトリガーされますが、親コンポーネントのボタンをトリガーしません。
other別の子コンポーネント2のボタンをクリックすると、別の子コンポーネント2のイベント、別の子コンポーネント1のイベント、および親コンポーネントのイベントがトリガーされます（別の子コンポーネント1のイベントの返品値が真実であるため）。
v-onを使用してカスタムイベントにバインドします。
[1]単純に言えば、子コンポーネントがイベント（イベントのメソッド）をトリガーすると、親コンポーネントもメソッド（親コンポーネントメソッドのメソッド）を実行します。
[2]トリガーされたバインディングは、テンプレート（つまり、置き換えられたテンプレートテンプレート）に記述されます。複数の子コンポーネントは親コンポーネントの方法に結合できます。または、異なる子コンポーネントは異なる親コンポーネント方法にバインドできますが、同じ子コンポーネントイベントではメソッドを結合できません。
【3】子コンポーネントは、メッセージの合格のパラメーターを発送します。子コンポーネントのイベントにパラメーターがない場合でも、パラメーターを親コンポーネントに渡す方法には影響しません（つまり、親コンポーネントの方法は、子コンポーネントの方法で得られたパラメーターを受け入れることができます）
例として：
<div id = "app">親コンポーネント：<butth>クリックしてブロードキャストを伝播する</button> <br/>子コンポーネント1：<！ - バインディングはここに記述されています。複数のバインディングは同じものにバインドできます。または異なるバインディングは異なりますが、複数は1つにバインドできません - > <children v-on： "parent" @test2 = "> children> </div> <script> var vm = new vue（{el： '＃app'、data：{val：1}、methods：{console）{arg） event "）;}、another：function（）{console.log（" Another Method "）;}}、components：{children：{//これには返品値がありません。 childclick：{this "emit"、 "dispatch2：function（）{emit（" test2 "） }）; </script>④サブコンポーネントインデックス
簡単に言えば、インデックスからサブコンポーネントを直接取得でき、各サブコンポーネントのメソッドを呼び出すことができます。
インデックスを追加する方法は次のとおりです。V-REFをタグに追加：インデックス名
コンポーネントを呼び出す方法は次のとおりです。vm。$ ref。インデックス名
これを使用することもできます。$ ref。親コンポーネントに直接インデックス名
この時点で、コンポーネントを取得してから、コンポーネントはそのメソッドを呼び出すか、データを使用できます。
サンプルコード：
<div id = "app">親コンポーネント：<button @click = "todo">子コンポーネントのトリガー</button> <br/>サブコンポーネント1：<！ - バインディングがここに記述されています。複数のバインディングを同じものにバインドできます。または、異なるバインディングは異なりますが、複数は1つにバインドできません - > <children v-ref：children> </children> </div> <script> var vm = new vue（{el： '＃app'、methods：{todo：function（）{this lefss.child.frompont（）;子供：{//これには返品値がなく、プロップを配布し続けません：['test']、テンプレート： "<button> children1 </button>"、method：{fromparent：console.log（ "parent by}}}}}}）; </script>上記は、VUEJS第10条VUEJS親子コンポーネントコミュニケーションがお客様に紹介されています。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！