Vue 2 - コンポーネント間の通信（データの送受信）

Question

私はVueでアプリを開発しています。私はコンポーネント間でデータを送受信することに問題があります。既に$dispatch/$broadcast、$emit/$onで試してみましたが、まだ動作しています。 ClubSelection.vueからvue_main.jsにactive_clubを選択して送付します。私のアプリの

Vue version: 2.0.3

構造：

1. vue_main - メインVueのファイル
   1. HeaderElement.vue（vue_mainの子）
      1. ClubSelection.vue（子のHeaderElement）

vue_mainするClubSelectionからactive_clubを送信する必要があります。

ClubSelection.vue

<script> 

    export default{ 
     props: [ 
      'club', 'title' 
     ], 
     created(){ 

      //Get club list 
      this.$http.get('/api/clubs', function(data) { 
       this.clubs = data; 
       console.log(data); 

       //read active club from parent 
       this.selected = this.$parent.$parent.active_club; 
      }); 

     }, 
     data(){ 
      return{ 
       clubs: [], 
       selected: null, 
      } 
     }, 
     watch: { 
      selected: function(v) { 
       this.club = v; 

       //Post to database selected club 
       this.$http.post('/api/clubs/' + v + '/active') 

      }, 
      club: function(v) { 
       this.selected = v; 

       //Change active_club at parent (THIS NOT WORKING) 
//    this.$emit('active_club', v); 
//    this.$parent.active_club = v; 
       club.$emit('active_club', v); 

      }, 
     } 

    } 
</script> 

vue_main.js

const app = new Vue({ 
    router, 
    data() { 
     return { 
      user: [], 
      active_club: null, 
      ranking: null 
     } 
    }, 
    created: function() { 
     var self = this; 

     this.$http.get('/api/users/me', function(data) { 
      this.user = data; 
      self.active_club = data.active_club; 

     }) 

    } 


}).$mount('#app'); 

const club = new Vue(); 

//THIS NOT WORKING 
club.$on('active_club', function (id) { 

    alert(id) 
    this.active_club = id; 
}); 

エラー：

Vue warn]: Error in watcher "club" (found in component )

vue_main.js:16924 Uncaught (in promise) ReferenceError: club is not defined

私は、これはそれらの一つであり、多くのセットアップを試してみました。これを動作させるにはどうすればいいですか？

Answer 1

$dispatchおよび$broadcastは、Vue 2.0で非難されています。

場合によっては、親コンポーネントと子コンポーネント間の通信が必要です。子供$emitのイベント、親は次のようにv-on:parentMethod()を使用して、テンプレートのマークアップ自体に方法を提供することによって、それを聞くことができた場合：

<child-component v-on:child-event="handlerMethod"></child-component> 

上記のマークアップは、親コンポーネントのテンプレート内で行われます。親コンポーネントはmethodsにhandlerMethodが必要です。 Delete a Vue child component

あなたは、あなたのアプリで$emitを実装するための基準として上記の解答を使用することができます：

はここでもjsFiddle例がありますStackOverflowの上のサンプル「親子のコミュニケーション」の問題、です。

編集：私はあなたが持っているノート約3レベルの階層を言及するのを忘れてしまった補注

。

親：vue_main

子供1：HeaderElement

子供1あなたのアプリケーションでは、次の階層を持っています。1：ClubSelection

ClubSelectionからvue_mainにイベントを送信する場合は、non parent-child communication methodを使用するか、中間のHeaderElementを使用してイベントをリレーできます。ここで

は、イベントリレーが働くことができる方法です。

• ステップ1：ClubSelectionはv-onを使用してHeaderElementによって受信され$emitを送信します。
• ステップ2：HeaderElementのhandlerMethodにはthis.$emitがあり、これはメインテンプレートで別のv-onを使用して受信できます。

上記は少し複雑に見えるかもしれませんが、一般にAngualr 1.xや他のフレームワークで行われているように、アプリ内のすべてのコンポーネントにブロードキャストするよりはるかに効率的です。