自定义组件是一个开发者编写的组件,使用起来和 Native 一样,最终按照组件的<template>来渲染;同时开发起来又和页面一样,拥有 ViewModel 实现对数据、事件、方法的管理。 自定义组件也叫子组件,因为它不能独立存在,需要被引入到页面上才能生效。子组件避免一个页面的布局庞大、臃肿,而且使代码可读性好、易维护。
子组件如何向父组件传值呢?比如当子组件对数据进行改造后,如何把最终数据交给父组件呢?主要有两种方法:
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的方法。
子组件通过$dispatch()触发自定义事件,父组件通过$on()监控自定义事件的触发。
解决方案
方法一
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的方法,如下例子中实现了如何将子组件中的count值传递到父组件上。子组件定义了emitEvt事件(父组件中引用时,需要添加on前缀),子组件在调用$emit()时,携带了count参数,父组件在响应事件时,便可获取到参数值。
<!-- 父组件 -->
<import name="comp1" src="./comp1.ux"></import> <template> <div style="flex-direction: column;"> <text>我是父组件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>
<!-- 子组件comp1 -->
<template> <div class="child-demo"> <text>我是子组件一count:{{compCount}}</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>
方法二
子组件调用childVm.$dispath()完成向上传递。子组件通过$dispatch()触发自定义事件,父组件通过$on()监控自定义事件的触发,自定义事件中控制num的变化,父组件中通过evt.detail获取子组件中的num的值赋值给父组件。
<!-- 父组件 -->
<import name="comp1" src="./comp1.ux"></import> <template> <div style="flex-direction: column;"> <text>我是父组件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>
<!-- 子组件comp2 -->
<template> <div class="child-demo"> <text>我是子组件二num:{{compNum}}</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>
欲了解更多详情,请参阅:
快应用开发指导文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
组件介绍:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-template
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204411993708700389?fid=18
原作者:Mayism