Question

这是我的根元素，在数据＆＃34;预订＆＃34;是一个使用sitebooking的对象。 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>

我正在循环访问parent compoent中的booking.sitebooking对象以创建多个子组件（每个站点预订将获得一个子组件）。

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

我正在通过＆＃34; my-sb＆＃34;支持和分配子组件中的本地数据。

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

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

有人可以帮忙吗？

Answer 1

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

编辑克隆一个对象以创建一个新对象称为deep cloning

Answer 2

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

每当我尝试将对象作为道具传递并分配到子域中的局部变量时，它实际上会复制父数据的引用，这会导致问题。因此，如果这样做，子进程中的更改将影响不好的父数据。

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

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

<强>解决方案

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

如何做克隆对象

Vuejs : How to pass an object as prop and have the component update sub-objects

Is this a good way to clone an object in ES6?

我现在修改了我的代码，

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

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

为什么vuejs子组件数据更改更新父数据也没有显式$ emit？

2 个答案: