如何在 VUE js 中的组件之间共享数据(创建列表时) [英] how to share data between components in VUE js (while creating list)

问题描述

能否请您告诉我如何在 VUE js 中的组件之间共享数据(创建列表时).我有两个组件 list components 和 add todo component.我想要当用户点击添加按钮时在列表中添加项目.但问题是输入字段存在于不同的组件中，而列表存在于不同的组件中这是我的代码https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview

//代码放在这里

var MyComponent = Vue.extend({模板: '#todo-template',道具:['物品']});var AddTODO = Vue.extend({模板:'#add-todo'，道具:['m']，数据:函数(){返回 {信息: ''}},方法: {addTodo: 函数 () {控制台日志(此消息)console.log(this.m);//this.m =this.message;},},});Vue.component('my-component', MyComponent);Vue.component('add-todo', AddTODO)var app = new Vue({el: '#App',数据: {信息: ''，项目: []},});

解决方案

拥有一个出色的 MVVM 框架的全部意义在于让您拥有一个视图模型:页面/应用程序/任何内容中所有状态的中央存储.组件可以发出事件.你可以有一个事件总线.但是如果您可以使用一个包含您所有状态的简单全局变量来挽救这一天，那么这是迄今为止最干净、最好的解决方案.因此，只需将待办事项放在一个数组中，放在全局范围内的变量中，然后在需要它们的每个组件的 data 中声明它们.这里它在 Plunkr 中工作.

标记

<add-todo></add-todo><我的组件></我的组件>
<模板 id="添加待办事项"><div><input type="text" v-model="message"><button @click="addTodo">添加待办事项</button>

</模板><模板 id="todo-template"><div><ul ><li v-for="(item,index) in store.items">{{item.message}}

</模板><script src="vue.js"></script><script src="script.js"></script>

代码

//这是魔法商店.这就是你所需要的.var vueStore = {items : []};var MyComponent = Vue.extend({模板: '#todo-template',数据:函数(){返回{商店:vueStore}}});var AddTODO = Vue.extend({模板:'#add-todo'，数据:函数(){返回 {信息: ''，商店:vueStore}},方法: {addTodo:函数(事件){this.store.items.push({'message' : this.message})},},});Vue.component('my-component', MyComponent);Vue.component('add-todo', AddTODO)var app = new Vue({el: '#App',数据: {商店:vueStore},});

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

这里是状态管理页面.

Could you please tell me how to share data between components in VUE js (while creating list).I have two components list components and add todo component.I want to add items in list when user click on add button.But issue is input field present in different component and list is present in different component here is my code https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview

// Code goes here

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


});

解决方案

The whole point of having a great MVVM framework is to let you have a view-model: a central store of all the state in your page/app/whatever. Components can emit events. You can have an event bus. But if you can save the day with a simple, global variable containing all your state, this is by far the cleanest, best solution. So just put your to-dos in an array, in a variable in global scope, then declare them in the data of every component that needs them. Here it is working in Plunkr.

markup

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

code

// 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
    },
});

This is not a savage hack! We're being called to stop thinking about events, move up the food chain, and think about reactive pipes. Components don't care when or by who the central store gets updated. Vue takes care of it.

Here's the page on state management.

这篇关于如何在 VUE js 中的组件之间共享数据(创建列表时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！