VueJS - автоматическое связывание родительского объекта в дочернем компоненте с emit, почему?

Question

Немного сложно рассказать об этом сценарии.Но я попытаюсь.

У меня есть дочерний компонент.Этот компонент отправит объект родителю с $emit

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

Это структура отправки sendData в $emit.Эта структура данных связывается с директивой v-модели в элементах формы.

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)));