1

这是我的根元素，在数据中“预订”是一个带有网站预订的对象。Sitebooking 对象可以具有包含名字和姓氏的对象数组。

var app = new Vue({
    el: '#app',
    data: {
        booking: {
            sitebooking: [{
                firstname: "",
                lastname: ""
            },{
                firstname: "",
                lastname: ""
            }],
        }
    }
});

这是我的模板（子组件），

<template id="sitebooking_template">
    <div>
        <div class="row clearfix">
            <div class="col-md-6">
                <div class="form-group required">
                    <label for="firstname">First name</label>
                    <input class="form-control" placeholder="First name" required="" name="firstname" type="text" value="" id="firstname" v-model="newcompsitebooking.firstname">
                </div>

            </div>
            <div class="col-md-6">
                <div class="form-group required">
                    <label for="lastname">Last name</label>
                    <input class="form-control" placeholder="Last name" required="" name="lastname" type="text" value="" id="lastname" v-model="newcompsitebooking.lastname">
                </div>
            </div>
        </div>
    </div>
</template>

我正在循环通过父组件中的 booking.sitebooking 对象来创建多个子组件（每个站点预订都会得到一个子组件）。

<div class="" id="app">
    <sitebooking v-for="(val,idx) in booking.sitebooking" :key="idx" :my-sb="val"></sitebooking>
</div>

我通过“my-sb”道具传递值并分配给子组件中的本地数据。

Vue.component('sitebooking', {
  template: '#sitebooking_template',
  props:["mySb"],
  data: function () {
      return {
          newcompsitebooking : this.mySb,
      }
  }
});

到目前为止一切正常，但奇怪的行为是每当我更改子组件中的值时，它也会更新父组件的数据。但是根据 vuejs 文档，子组件的更改将通过 emit 传播回父组件。但是我没有将数据发送回父级，但值仍然会在父级中自动更新。

有人可以帮忙吗？

4

2 回答 2

1

您正在传递一个指向 siteBooking 对象的指针。子对象可以做任何它喜欢的指针并且父对象不会做出反应，但对象及其属性仍然是共享的。

编辑克隆一个对象以创建一个新对象称为深度克隆

于 2018-03-15T15:10:12.623 回答
0

我通过以下更改解决了这个问题。

每当我尝试将对象作为道具传递并分配给子变量时，它实际上会复制父数据的引用，这会导致问题。所以如果你这样做，孩子的变化会影响不好的父数据。

我在这里找到了一个很好的讨论，

https://forum.vuejs.org/t/props-are-mutable-when-passed-as-an-object/2525/5

解决方案

为了解决这个问题，正如@icecream_hobbit 回答中所建议的那样，我尝试克隆 prob obj，然后将它的新副本存储在本地数据中。

如何克隆对象

Vuejs：如何将对象作为道具传递并让组件更新子对象

这是在 ES6 中克隆对象的好方法吗？

我现在像这样修改了我的代码，

Vue.component('sitebooking', {
  template: '#sitebooking_template',
  props:["mySb"],
  data: function () {
      return {
          newcompsitebooking : {...this.mySb},
      }
  }
});

现在问题解决了。感谢@icecream_hobbit。

于 2018-03-15T15:38:30.920 回答