VUE jsのコンポーネント間でデータを共有する方法（リストの作成中）

Question

VUE jsのコンポーネント間でデータを共有する方法を教えてください（リストの作成中）list componentsとadd todo componentの2つのコンポーネントがあります。 add button .Butの問題は別のコンポーネントと、リストに現在の入力フィールドでのユーザーのクリックが、ここでは異なるコンポーネントで 存在する場合、リストに私のコードは https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview

です//コードは、あなたはそうここ

var MyComponent = Vue.extend({ 
    template: '#todo-template', 
    props: ['items'] 


}); 
var AddTODO = Vue.extend({ 
    template: '#add-todo', 
    props: ['m'], 
    data: function() { 
     return { 
      message: '' 
     } 
    }, 
    methods: { 
     addTodo: function() { 
      console.log(this.message) 
      console.log(this.m); 
      //this.m =this.message; 
     }, 
    }, 
}); 
Vue.component('my-component', MyComponent); 
Vue.component('add-todo', AddTODO) 


var app = new Vue({ 
    el: '#App', 
    data: { 
     message: '', 
     items: [] 
    }, 


}); 

Answer 1

を可能性が行きますイベントを使用する作成されたtodoをroot vueインスタンスに出力します。 私はplunkrを編集/フォークしました（私はむしろフィドルタイプです）。

https://plnkr.co/edit/bnMiDmi30vsj3a8uROBK?p=preview

だから私は、カスタムイベントaddedをリッスンし、項目の最初の引数をプッシュされ、ここでは、この行を編集しました。

<add-todo v-on:added='items.push(arguments[0])'></add-todo> 

また、これらの行は、イベントを放出します。あなたが小道具を変異させるはずのため、私は、データmessageにプロパティmから変更：

<input type="text" v-model="message"> 
    <button @click="$emit('added', message)">Add todo</button> 

Answer 2

偉大なMVVMフレームワークを持っていることの全体のポイントは、ビュー・モデルを持っているようにすることです：すべての中央ストアあなたのページ/アプリ/どのような状態でもコンポーネントはイベントを発生させることができます。イベントバスを持つことができます。 しかし、すべての状態を含む単純なグローバル変数で日を保存することができれば、これははるかにクリーンで最善の解決策です。だから、あなたの予定をグローバルスコープの変数に配列して、それを必要とするすべてのコンポーネントのdataに宣言してください。 Here it is working in Plunkr。

マークアップ

<div id="App" > 
    <add-todo></add-todo> 
    <my-component></my-component> 
</div> 
<template id="add-todo"> 
    <div> 
     <input type="text" v-model="message"> 
     <button @click="addTodo">Add todo</button> 
    </div> 
</template> 
<template id="todo-template"> 
    <div> 
     <ul > 
      <li v-for="(item,index) in store.items"> 
       {{item.message}} 
      </li> 
     </ul> 
    </div> 
</template> 
<script src="vue.js"></script> 
<script src="script.js"></script> 

コード

// This is the magic store. This is all you need. 
var vueStore = {items : []}; 

var MyComponent = Vue.extend({ 
    template: '#todo-template', 
    data : function(){return {store : vueStore}} 
}); 
var AddTODO = Vue.extend({ 
    template: '#add-todo', 
    data: function() { 
     return { 
      message: '', 
      store : vueStore 
     } 
    }, 
    methods: { 
     addTodo: function (event) {  
      this.store.items.push({'message' : this.message}) 
     }, 
    }, 
}); 
Vue.component('my-component', MyComponent); 
Vue.component('add-todo', AddTODO)  
var app = new Vue({ 
    el: '#App', 
    data: { 
     store : vueStore 
    }, 
}); 

これは野蛮なハックではありません！私たちはイベントの考え方をやめ、食物連鎖を上げ、反応性パイプについて考えるよう求められています。コンポーネントは、セントラルストアが更新されたとき、または誰によって更新されるのかを気にしません。 Vueはそれを処理します。

Here's状態管理のページ。