VUE通信成分（A）

　　部品とアセンブリの関係、通常、親子関係、兄弟と世代間関係。

　　別のシナリオでは、どのように適切な通信方式を選択するには？

（A）小道具/ $ EMIT

　　　parentComponentに==> childComponent

　　     　　 子小道具[childParams】 親パラメータAを受け付ける上を通過親コンポーネント。

　　　　　　親V-バインド：childParams = parentParams子供に、このように送信されます。

 

　　　childComponent ==>のparentComponent

　　　　　　使用して子   。この$発する（eventChild、パラメータ）をトリガイベントを。

　　　　      親V-上：eventChild = methodParentは  、イベント、取得パラメータを待ち受けます。

　　　 コードは以下の通りであります：

　　　　　parentComponentに：

<テンプレート> 
    の<div> 
        <子V-バインド：childAnimals = "parentAnimals" V-上：titleChanged = "updateChange"> </子> 
        <h2のV-テキスト= "タイトル"> </ H2> 
    </ div> 
< /テンプレート> 
<スクリプト> 
からインポート子供 './child' 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            タイトル： '未改变时候的值' 、
            parentAnimals：[ '犬'、 '猫'、 'ピンク' ] 
        } 
    } 、
    コンポーネント：{
         '子' ：子供
    }、
    方法。{ 
        updateChange（E）{ 
            CONST {名} =E;
            この .TITLE = 名前; 
        } 
    } 
}
 </ SCRIPT>

　　　　　　childComponent

<テンプレート> 
    の<div> 
        <！ - -親コンポーネントのパラメータが渡された> 
        <UL> 
            <LIのV- ための "childAnimalsで動物" = V-バインド：キー= "アニマル" V-テキスト= "アニマル"> </ LI> 
        </ UL> 

        <！ -親要素にパラメータを渡す- > 
        <ボタン@ =クリックして"changeParentTitle">変更の親コンポーネントのタイトル</ボタン> 
    </ div> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{} 
    } 
    // 小道具：{ 
    //      動物：{ 
    //          型：Array、
    //          必須：真
    //      } 
    // }
    小道具：[ 'childAnimals' ]、
    方法：{ 
        changeParentTitle（）{ 
            この $ EMIT（ 'titleChanged'。、{ 
                名前：父は、サブアセンブリのタイトルを変更" 
            }）; 
        } 
    } 
}
 </ SCRIPT>

（二）$ / $です発します

　　 ブランドの新しいVueの例を通じて、中央イベント処理センターとして、トリガイベントは、イベントをリッスン。

　　 どのように使用するには：

　　　　トリガ：。EventInstance $ EMIT（イベント名A、paramsは）
　　　　イベントを聞く：。EventInstance $ ON（イベント名A、（paramsは）=> { }）

　　  eventService.js

「表示」からインポートビュー。
輸出はeventInstanceましょう = 新しい）（ビュー。

　　child.vue

<テンプレート> 
    の<div> 
         <ボタン@クリック= "送信">子发送消息</ボタン> 
    </ div> 
</テンプレート> 
の<script> 
からインポート{eventInstance} '../commonEvent/eventService' ; 
輸出のデフォルト{ 
    データ（）{ 
        リターン{} 
    }、
    メソッド：{ 
        {（）を送る
            。（eventInstanceを$発する、 'MSG-子' ` この子$ {から新しい。日付（）のtoLocaleString（）}`）。
        } 
    } 
}
 </ SCRIPT>

　　　dog.vue成分はchild.vueから送信された情報を受け付け

<スクリプト> 
からインポート{eventInstance} '../commonEvent/eventService' 。
エクスポートデフォルト{ 
    データ（）{ 
        リターン{} 
    }、
    コンポーネント：{}、
    搭載（）{ 
        eventInstanceに$（ 'MSG-子供、（RES）=> { 
            にconsole.log（RES）; 
        }）; 
    } 
}
 </ SCRIPT>