自定义组件是一个开发者编写的组件,应用起来和 Native 一样,最终依照组件的来渲染;同时开发起来又和页面一样,领有 ViewModel 实现对数据、事件、办法的治理。 自定义组件也叫子组件,因为它不能独立存在,须要被引入到页面上能力失效。子组件防止一个页面的布局宏大、臃肿,而且使代码可读性好、易保护。
子组件如何向父组件传值呢?比方当子组件对数据进行革新后,如何把最终数据交给父组件呢?次要有两种办法:
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的办法。
子组件通过$dispatch()触发自定义事件,父组件通过$on()监控自定义事件的触发。
解决方案
办法一
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的办法,如下例子中实现了如何将子组件中的count值传递到父组件上。子组件定义了emitEvt事件(父组件中援用时,须要增加on前缀),子组件在调用$emit()时,携带了count参数,父组件在响应事件时,便可获取到参数值。
我是父组件count:{{fcount}}
export default {
private:{
fcount:20
},
emitEvt(evt){
this.fcount = evt.detail.count
}
}
我是子组件一count:{{compCount}}
export default {
props: ['count'],
data(){
return{
compCount:this.count
}
},
addHandler(){
this.compCount ++
this.$emit('emitEvt',{
count:this.compCount
})
}
}
办法二
子组件调用childVm.$dispath()实现向上传递。子组件通过$dispatch()触发自定义事件,父组件通过$on()监控自定义事件的触发,自定义事件中管制num的变动,父组件中通过evt.detail获取子组件中的num的值赋值给父组件。
我是父组件fnum:{{fnum}}
export default {
private:{
fnum:20
},
onInit(){
this.$on('dispathEvt',this.dispathEvt)
},
dispathEvt(evt){
this.fnum = evt.detail.num
}
}
我是子组件二num:{{compNum}}
export default {
props: ['num'],
data(){
return{
compNum:this.num
}
},
delHandler(){
this.compNum --
this.$dispatch('dispathEvt',{
num:this.compNum
})
}
}
欲了解更多详情,请参阅:
快利用开发领导文档:https://developer.huawei.com/…
组件介绍:https://developer.huawei.com/…
原文链接:https://developer.huawei.com/…
原作者:Mayism