如何共享VUE js中的組件之間的數據（創建列表時）

請問如何在VUE js中的組件之間共享數據（創建列表時）。我有兩個組件list components和add todo component。我想添加項目在名單上的時候。但add button問題用戶點擊存在於不同的組件和列表輸入字段出現在不同的分量這裏是我的代碼 https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview 如何共享VUE js中的組件之間的數據（創建列表時）

//代碼放在這裏

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: [] 
    }, 


});

來源

2017-09-02 user5711656

使用[事件總線]（https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication）或VueX。 – Terry

你怎麼能分享重拳 – user5711656

，所以你可以使用事件和將創建的待辦事項發送到根vue實例。我編輯/分叉您的plunkr（我更喜歡小提琴類型）。

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

所以我在這裏編輯這行，來監聽自定義事件added和推動的第一個參數項目。

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

還有這些行，它們發出事件。我是從屬性m改爲數據message，因爲你不應該變異道具：

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

來源

2017-09-02 17:12:04

有一個偉大的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頁面狀態管理。

來源

2017-09-02 22:12:51 bbsimonbb

如何共享VUE js中的組件之間的數據（創建列表時）

回答

相關問題