Vueのコンポーネントの通信

Question

は、私は2つのVueのコンポーネントがありますか？コンポーネント間の通信はどのように機能しますか？

Answer 1

Vue.jsのドキュメントでは、コンポーネント間の通信はあまり注目されておらず、このテーマをカバーするチュートリアルもありません。コンポーネントを分離する必要があるため、コンポーネントに直接アクセスしないでください。これは、コンポーネントを緊密に結びつけ、あなたがやっていることをまったく止めてしまいます。

Javascriptには、コミュニケーションのための優れた方法があります。 Vue.jsにはイベントシステムが組み込まれており、主に親子通信に使用されます。 From the docs：

Vueインスタンスの子と親に直接アクセスできますが、コンポーネント間通信には組み込みイベントシステムを使用する方が便利です。また、コードの結合も容易で、保守も簡単です。親子関係が確立されると、各コンポーネントのイベントインスタンスメソッドを使用してイベントを送出およびトリガーできます。

イベントシステムを説明するために彼らのコード例を：

var parent = new Vue({ 
    template: '<div><child></child></div>', 
    created: function() { 
    this.$on('child-created', function (child) { 
     console.log('new child created: ') 
     console.log(child) 
    }) 
    }, 
    components: { 
    child: { 
     created: function() { 
     this.$dispatch('child-created', this) 
     } 
    } 
    } 
}).$mount() 

ダンHolloranは最近twopiecesで、クロスコンポーネントメッセージングと彼の「闘争」の作品を書いています。これは、親子関係のないコンポーネント間の通信が必要な場合に役立ちます。

（通信のイベントを使用する以外の）私が経験したもう1つのアプローチは、コンポーネントにバインドされたインスタンスを持つ公開APIへの参照を持つ中央コンポーネントレジストリを使用しています。レジストリはコンポーネントの要求を処理し、そのパブリックAPIを返します。

Vue.jsの文脈では、イベントは私の武器になります。

Answer 2

ペスラの回答に加えて、ガイドのState Management section under Building large scale apps：http://vuejs.org/guide/application.html#State_Managementをご覧ください。私はここに基づいてjsfiddleを作成しました：https://jsfiddle.net/WarwickGrigg/xmpLg92c/。

この手法はあまりにコンポーネントのために働く：親子、兄弟、兄弟コンポーネントの関係など

var hub = { 
    state: { 
    message: 'Hello!' 
    } 
} 

var vmA = new Vue({ 
    el: '#appA', 
    data: { 
     pState: { 
     dA: "hello A" 
    }, 
    hubState: hub.state 
    } 
}) 

var vmB = new Vue({ 
    el: '#appB', 
    data: { 
     pState: { 
     dB: "hello B" 
    }, 
    hubState: hub.state 
    } 
}) 

Answer 3

コンポーネント間の通信はまた、あなたのVueのアプリケーションでは、単一のグローバルイベントハブを作成することによって確立することができます。このような何か： -

var bus = new Vue();

今、あなたはカスタムイベントを作成して、任意のコンポーネントからそれらを聞くことができます。

 // A.vue 
    // ... 
    doThis() { 
     // do the job 

     bus.$emit('done-this'); 
    } 

    // B.vue 
    // ... 
     method:{ 
      foo: function() 
      } 
    created() { 
     bus.$on('done-this', foo); 
    } 

詳細はfrom official documentation.です。