VueJS - 使用 emit 在 child 组件中自动绑定 parent object，为什么？

Question

这个场景有点难讲。但我会努力的。

我有一个 child 组件。该组件将发送 object 到 parent 和 $emit

this.$emit("get-condition", this.sendData);

这是$emit中发送的sendData结构。此数据结构与表单元素中的 v-model 指令绑定。

sendData: {
           selectedValue: null,
           cond: null,
           inTime: null,
           operand: null,
           inTimeValue: null,
           compareValue: null
 }

在parent中，我有一个空的object并将数据分配到这个object中。

setCondition(obj) {

   this.$set(this.mockConditions, this.mockKey++ , obj);
},

之后我在 parent 中有一个像这样的 object。我的意思是我将数据从 child 传递到 parent。现在没事了。

0: Object {
    compareValue:"25"
    cond:"Average"
    inTime:null
    inTimeValue:"23"
    operand:null
    selectedValue:"Flow"
}

此时在child表格中与parent绑定object。如果打开 child 表单并为表单元素输入一些新值，它会影响 parent object 并创建 $emit 事件。

如何在 $emit 事件后将它们分开？

Answer 1

传递给 setCondition 方法的 obj 参数是对 sendData 属性的引用。要取消绑定该引用，您可以在发射之前克隆该对象：

this.$emit("get-condition", JSON.parse(JSON.stringify(this.sendData)));

VueJS - 使用 emit 在 child 组件中自动绑定 parent object，为什么？

VueJS - Auto bind parent object in child component with emit, why?

javascript

vuejs2

vue-component

javascript-objects

emit