VueJS 2.0 - 兄弟コンポーネント間の通信 - $ emitと$ on

Question

私は次のようにアプリケーションを構築しています。私が使用しているモデルを見てみましょう。（私はLaravel 5.3をバックグラウンドで提供しています

例：クライアント （example.com/admin/clients）2つのコンポーネントとをロードします。モデレーターは、現在選択されているクライアントを変更するためのフォームです。ナビゲーターは、これらの

。あなたが操作したいクライアントを選択し、両方のルートヴュー、＃管理アプリにグローバルなコンポーネントとして読み込まれます。

Vue.js 1.0ではルートインスタンスに2つのコンポーネントをロードさせました：selected-client.sync = "selectedClient"はルートデータ変数 "selectedClient"に関連付けられ、これらのコンポーネントは "selectedClient"を小道具として受け入れました。 Navigatorは新しいクライアントを選択しました。ナビゲータはselectedClientを更新します。これは参照渡しであるため、ルートインスタンスと同期されたモデレータも更新され、そのクライアントの詳細がフォームに格納されます。兄弟は、「イベント」で、それに基づいて行動することが可能であろうように、フォームを保存/キャンセルされた

、私は$、部品の$親からのイベントを放送...

私がしようとしていますVue.js 2.0でこの機能を再現しましたが、できませんでした。

1.0から2.0へのアップデートに関するドキュメントを読んだことがありますが、使用している小道具の突然変異に対して警告しています。どのようにして$ emitと$ on関数の概要を示します。

私は

• 私は私の兄弟要素で$に使用することができます...そのeventHubの例を使用して気にしますが、それを実装する方法の詳細方向を必要としないでしょうか？
• これを各ルートインスタンスで個別に定義する必要がありますか？
• 私が取り組んでいるモデルごとに異なるルートインスタンスを用意する必要がありますか？
• これに適したvue拡張機能/プラグインはありますか？
• 私はこれにもまさにアプローチしていますか？

ありがとうございます。

マイapp.js

Vue.component(
    'admin-clients-moderator', 
    require('./components/admin/clients/Moderator.vue') 
); 

Vue.component(
    'admin-clients-navigator', 
    require('./components/admin/clients/Navigator.vue') 
); 

var mainApp = new Vue({ 
    el: '#app', 
    data: { 
     selectedClient: {}, // I don't think i need this anymore 
    } 
}); 

**マイNavigator.vue（簡体字）

.... Template .... 
     <tr v-for="client in collection"> 
      <td>{{ client.name }}</td> 
      <td>{{ client.status }}</td> 
      <td> 
       <button class="btn btn-primary btn-xs" 
         @click="select(client)" 
       > 
        <i class="fa-search fa"></i> 
       </button> 

       <button class="btn btn-danger btn-xs" 
         @click="remove(client)" 
       > 
        <i class="fa-trash fa"></i> 
       </button> 
      </td> 
     </tr> 

.... Javascript .... 

<script> 
export default { 
    props: [], 
    data() { 
     return { 
      selectedClient: {}, 
      collection: [], 
      // TRAIT 
      resource: null, 
      resourceUri: "", 
      modelName: "" 
     }; 
    }, 
    methods: { 
     select(client) { 
      this.$emit('client-selected', {client}); 
      this.selectedClient = client; 
     }, 
     remove(client) { 
      this.deleteModel(client) 
     }, 

Moderator.vue

.... JaveScript 


<script> 
export default { 
    props: [], 
    data() { 
     return { 
      selectedClient: {}, 
      // TRAIT 
      resource: null, 
      resourceUri: "", 
      modelName: "" 
     }; 
    }, 
    computed: { 
     newClient() { 
      return (this.selectedClient.id == null 
      || this.selectedClient.id == 0); 
     } 
    }, 
    created() { 
     this.$on('client-selected', this.setSelectedClient); 
    }, 
    methods: { 
     setSelectedClient(client) { 
      this.selectedClient = client; 
     }, 

Answer 1

以下のコードスニペット

私の兄弟コンポーネントで$ onを使用できますか？

はい。あなたは$onと$emit両方あなたの親や兄弟のコンポーネントで

私は、各ルート・インスタンスで個別にこれを定義する必要がありますを使用することができますか？

グローバル変数を追加できます。しかし、私は通常、この this.$root.$emit(my-event)

は、私が働いている機種ごとに異なるルート・インスタンスを持つべきですか？

を参照してください＃2

は、このために適しているでしょうVUE拡張/プラグインはありますか？

は、あなたが構築しているアプリケーションに依存し、あなたが Vuex

をチェックする必要があるかもしれません私もこれは正しい方法で近づいているだろうか？

これまでのところ、ルーツが見えます。