Question

您好我是Vue的新手，我想问一个关于将父组件值绑定到子组件的问题，以及当该值在子组件中发生更改时我想要为父组件更改。

我做了一个JS Fiddle显示我在哪里完成了这个，但我很困惑为什么它的工作方式如此。如果我将一个Object传递给prop，它将绑定值，但是如果我按原样传递它，我会得到变形＆＃39;错误。

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>

我最初的目标是进行演示＆＃39; Vue对象是我要发布回服务器的主要数据对象，并且有几个组件可以在主要的演示中编辑特定的数据部分。对象以自己独特的方式，所以真的只是一个关注点的分离。

欢迎使用Vue以这种方式设计应用程序的任何意见/建议/意见。

我还读到你可以听孩子的事件并以这种方式改变父价值。

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

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

Answer 1

在传递对象时它会起作用，因为在JavaScript中：

对象通过引用传递
原语按值传递

你结帐this知道通过引用传递并通过值传递

当您将对象作为prop传递并在子组件中更改它时，传递的对象会发生变异，因为只传递对象的内存位置而不是新对象。

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

要使其工作，您应该从子组件向父组件发出一个事件。见custom events.

建议使用事件来改变从父母那里收到的道具。

以下是updated fiddle

在Vue 2.4中将数据从Child传输到Parent Component的正确方法？

1 个答案: