javascript - VueJS - 使用发射自动绑定(bind)子组件中的父对象，为什么？

Question

描述这个场景有点困难。但我会尝试。

我有一个子组件。该组件将使用 $emit

向父级发送一个对象

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

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

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

在父级中，我有一个空对象并将数据分配到该对象中。

setCondition(obj) {

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

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

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

此时子窗体与父对象绑定(bind)。如果打开子表单并向表单元素输入一些新值，它会通过创建的 $emit 事件影响父对象。

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

Answer 1

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

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