How can a subcomponent pass values to its parent component? - Huawei Developers

[Method 1] The subcomponent uses $emit() to trigger a custom event bound to the node to execute the method of its parent component.
The following example shows how to pass the count value of a subcomponent to its parent component:
The subcomponent defines the emitEvt event (the on prefix needs to be added when it is referenced in the parent component). When the subcomponent calls $emit(), the count parameter is carried. Its parent component can obtain the parameter value when responding to the event.
<!-- Parent component -->
Code:
<import name="comp1" src="./comp1.ux"></import>
<template>
<div style="flex-direction: column;">
<text>This is the parent component count:{{fcount}}.</text>
<comp1 count="{{fcount}}" onemit-evt="emitEvt"></comp1>
</div>
</template>
<script>
export default {
private:{
fcount:20
},
emitEvt(evt){
this.fcount = evt.detail.count
}
}
</script>
<!-- Subcomponent comp1 -->
Code:
<template>
<div>
<text>This is count:{{compCount}}, which is the first subcomponent.</text>
<input type="button" onclick='addHandler' value='add'></input>
</div>
</template>
<script>
export default {
props: ['count'],
data(){
return{
compCount:this.count
}
},
addHandler(){
this.compCount ++
this.$emit('emitEvt',{
count:this.compCount
})
}
}
</script>
[Method 2] The subcomponent calls the childVm.$dispath() API to pass the value to its parent component.
A subcomponent uses $dispatch() to trigger a custom event, and its parent component uses $on() to monitor the triggering of the custom event and control the change of num in the event. The parent component uses evt.detail to obtain the value of num in its subcomponent, and assigns the value to itself.
<!-- Parent component -->
Code:
<import name="comp1" src="./comp1.ux"></import>
<template>
<div style="flex-direction: column;">
<text>This is the parent component fnum:{{fnum}}.</text>
<comp2 num="{{fnum}}"></comp2>
</div>
</template>
<script>
export default {
private:{
fnum:20
},
onInit(){
this.$on('dispathEvt',this.dispathEvt)
},
dispathEvt(evt){
this.fnum = evt.detail.num
}
}
</script>
<!-- Subcomponent comp2 -->
Code:
<template>
<div>
<text>This is num:{{compNum}}, which is the second subcomponent.</text>
<input type="button" onclick='delHandler' value='del'></input>
</div>
</template>
<script>
export default {
props: ['num'],
data(){
return{
compNum:this.num
}
},
delHandler(){
this.compNum --
this.$dispatch('dispathEvt',{
num:this.compNum
})
}
}
</script>