Question

很难说明这种情况。但是我会尽力的。

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

将对象发送给父对象

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

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

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

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

setCondition(obj) {

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

在那之后，我在父级中有一个像这样的对象。我的意思是我将数据从孩子传递给父母。没关系

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

此时，子窗体与父对象绑定。如果打开子表单并输入一些新值来形成表单元素，则它会在父对象中受$emit事件的影响。

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

Answer 1

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

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

VueJS-自动将子组件中的父对象绑定到发射，为什么？

1 个答案: