自定义组件是一个开发者编写的组件，应用起来和 Native 一样，最终依照组件的来渲染；同时开发起来又和页面一样，领有 ViewModel 实现对数据、事件、办法的治理。 自定义组件也叫子组件，因为它不能独立存在，须要被引入到页面上能力失效。子组件防止一个页面的布局宏大、臃肿，而且使代码可读性好、易保护。

子组件如何向父组件传值呢？比方当子组件对数据进行革新后，如何把最终数据交给父组件呢？次要有两种办法：

子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的办法。

子组件通过$dispatch()触发自定义事件，父组件通过$on()监控自定义事件的触发。

解决方案

办法一

子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的办法，如下例子中实现了如何将子组件中的count值传递到父组件上。子组件定义了emitEvt事件(父组件中援用时，须要增加on前缀)，子组件在调用$emit()时，携带了count参数，父组件在响应事件时，便可获取到参数值。

export default {

private:{

fcount:20

},

emitEvt(evt){

this.fcount = evt.detail.count

}

}

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的值赋值给父组件。

export default {

private:{

fnum:20

},

onInit(){

this.$on('dispathEvt',this.dispathEvt)

},

dispathEvt(evt){

this.fnum = evt.detail.num

}

}

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