[英]VueJS - Auto bind parent object in child component with emit, why?
It's a bit hard to telling this scenario. 很难说出这种情况。 But I'll try. 但是我会尽力的。
I have an child component. 我有一个子组件。 This component will send an object to parent with $emit
该组件将使用$emit
将对象发送给父对象
this.$emit("get-condition", this.sendData);
This is sendData structure of sending in $emit
. 这是$emit
中发送的sendData结构。 This data structure bind with v-model directive in form elements. 该数据结构与表单元素中的v-model指令绑定。
sendData: {
selectedValue: null,
cond: null,
inTime: null,
operand: null,
inTimeValue: null,
compareValue: null
}
In parent, I have an empty object and assign the data into this object. 在父级中,我有一个空对象,并将数据分配到该对象中。
setCondition(obj) {
this.$set(this.mockConditions, this.mockKey++ , obj);
},
After that I have an object like this in parent. 之后,在父级中有一个像这样的对象。 I mean I pass the data from child to parent. 我的意思是我将数据从孩子传递给父母。 It's ok right now. 没关系
0: Object {
compareValue:"25"
cond:"Average"
inTime:null
inTimeValue:"23"
operand:null
selectedValue:"Flow"
}
At this point in child form binding with parent object. 此时子窗体与父对象绑定。 If open child form and enter some new values to form elements, it affected in parent object with created $emit
event. 如果打开子窗体并输入一些新值以形成窗体元素,则它会在父对象中受创建$emit
事件的影响。
How to seperate them after $emit
event ? $emit
事件后如何分隔它们?
The obj
parameter passed to setCondition
method is a reference to sendData
attribute. 传递给setCondition
方法的obj
参数是对sendData
属性的引用。 To unbind that reference you can clone the object before emitting it: 要取消绑定该引用,可以在发出对象之前对其进行克隆:
this.$emit("get-condition", JSON.parse(JSON.stringify(this.sendData)));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.