Javascript 如何在VUE js中的组件之间共享数据（创建列表时）

请告诉我如何在VUE js中的组件之间共享数据（创建列表时）。我有两个组件

列出组件

和

添加todo组件

。当用户单击

添加按钮

时，我想在列表中添加项目。但问题是不同组件中存在输入字段，不同组件中存在列表 这是我的密码

//代码在这里

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


});

---

因此，您可以使用事件并将创建的todo发送到根vue实例。 我编辑/分叉了你的弹弓（我是个很喜欢拉小提琴的人）

因此，我在这里编辑了这一行，它侦听一个自定义事件

added

，并将第一个参数推送到items

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

---

因此，您可以使用事件并将创建的todo发送到根vue实例。 我编辑/分叉了你的弹弓（我是个很喜欢拉小提琴的人）

因此，我在这里编辑了这一行，它侦听一个自定义事件

added

，并将第一个参数推送到items

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

---

拥有一个优秀的MVVM框架的全部目的是让您拥有一个视图模型：一个页面/应用程序/任何内容中所有状态的中央存储。组件可以发出事件。你可以有一辆活动巴士但是如果你能用一个包含你所有状态的简单全局变量来节省时间，这是迄今为止最干净、最好的解决方案。因此，只需将待办事项放在一个数组中，放在全局范围内的一个变量中，然后在每个需要它们的组件的

数据中声明它们

标记

<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>

这不是野蛮的黑客！我们被要求停止思考事件，向食物链的上游移动，思考反应管道。组件不关心中央存储何时或由谁更新。Vue会处理好它

关于状态管理的页面
 拥有一个优秀的MVVM框架的全部意义在于让您拥有一个视图模型：一个页面/应用程序/任何内容中所有状态的中央存储。组件可以发出事件。你可以有一辆活动巴士但是如果你能用一个包含你所有状态的简单全局变量来节省时间，这是迄今为止最干净、最好的解决方案。因此，只需将待办事项放在一个数组中，放在全局范围内的一个变量中，然后在每个需要它们的组件的
数据中声明它们

标记

<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>

这不是野蛮的黑客！我们被要求停止思考事件，向食物链的上游移动，思考反应管道。组件不关心中央存储何时或由谁更新。Vue会处理好它

关于状态管理的页面
 使用、或VueX。如何共享Plunk使用、或VueX。如何共享Plunk