在Vue 2.4中将数据从子项转移到父项的正确方法？

嗨我是Vue的新手，我想问一个关于将父组件值绑定到子组件的问题，以及当我希望更改父组件的值时，该值发生更改。在Vue 2.4中将数据从子项转移到父项的正确方法？

我做了一个JS Fiddle显示我在哪里做到这一点，但我很困惑它为什么它的工作方式。如果我将一个对象传递给prop，它会绑定这些值，但如果我按原样传递它们，则会出现'变种'错误。

JS：

var demo = new Vue({ 
    el: '#demo', 
    data: { 
     Name: { firstName: "Bonjur", secondName: "Captain"}, 
     firstName: "Hello", 
     secondName: "World", 
    } 
}); 

Vue.component('working', { 
    template: '<div>' + 
     'First: <input v-model="names.firstName" />' + 
     'Second: <input v-model="names.secondName" /> ' + 
     '</div>', 
    props: { 
     names: null 
    } 
}) 

Vue.component('broken', { 
    template: '<div>' + 
     'First: <input v-model="first" />' + 
     'Second: <input v-model="second" /> ' + 
     '</div>', 
    props: { 
     first: null, 
     second: null 
    } 
})

HTML

<div id="demo"> 
    <working :names="Name"></working> 
    <broken :first="firstName" :second="secondName" ></broken> 
    <p> {{Name.firstName}} {{Name.secondName}} </p> 
    <p> {{firstName}} {{secondName}} </p> 
</div>

我最初的目标是有“演示” Vue的对象是主要的数据对象，我要回发到服务器，并有几个组件以他们自己独特的方式编辑主“演示”对象中的特定数据部分，所以实际上只是一个问题的分离。

欢迎任何有关使用Vue设计应用程序的意见/建议。

我也读过，你可以听到孩子的事件，并改变父母的价值。

如何设计或打算在Vue js v2.4中完成这种Child to Parent数据绑定？

为什么上面的例子按照它的方式工作？

来源

2017-08-04 Anton Toshik

当你传递对象，因为在JavaScript它的工作：

对象按引用传递
原语是按值传递

您的结账this知道关于通过参考通过并通过值

将对象作为道具传递并将其更改为子组件时，传递的对象将发生变异，因为只传递该对象的内存位置而不是新对象。

当您传递原语作为道具时，您正在创建一个新副本并由子组件接收。更改broken组件中值的原因是，新复制的值不是根实例中的原始值。

为了使它工作，您应该向子组件发出一个事件给父组件。请参阅custom events.

其推荐使用事件来变异从父母收到的道具。

这里是updated fiddle

来源

2017-08-04 10:57:34

谢谢你为一个伟大的解释 –

你可以更新你如何做相同，但与对象的问题？ –

在Vue 2.4中将数据从子项转移到父项的正确方法？

回答

相关问题