如何实现子组件向父组件传值
自定义组件是一个开发者编写的组件,使用起来和 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
相关文章
- SpringCloud微服务(07):Zipkin组件,实现请求链路追踪
- SpringBoot2.0 基础案例(16):配置Actuator组件,实现系统监控
- 【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
- 微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数(页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容)
- 【软通动力】HarmonyOS三方件开发指南(6)-ActiveOhos_sqlite组件
- Android应用程序组件Content Provider的启动过程源代码分析
- SwiftUI 组件大全之如何实现半模态视图 和浮动标签栏(教程含源码)
- SwiftUI 界面大全之如何判断小组件是否在某个大组件内,实现蒙特卡洛近似Monte Carlo Approximation(教程含源码)
- SwiftUI UI高级技巧之实现Table表格类组件基于多视图测量并限定宽度
- SwiftUI 中级组件之按钮组只能选中一个(中文教程含源码)
- SwiftUI 1原生实现之轮播图组件实现自动切换图片(教程含源码)
- Flutter 教程之 轮播图组件实现滚动视觉差(教程含源码)
- Maven中央仓库正式成为Oracle官方JDBC驱动程序组件分发中心
- 手写实现Vue内置组件component(Vue进阶)
- 【Unity3D日常开发】(二)实现角色移动行走之Transform、Rigidbody、CharacterController组件
- 如何用list组件实现tabbar标题栏
- 如何实现子组件向父组件传值
- 如何在快应用中实现滑动操作组件
- 如何用 120 行代码,实现交互完整的拖拽上传组件?
- 还在苦恼验证码怎么实现?看看这个验证码组件合集,你想要的都有
- React 的antd-mobile 组件库,嵌套路由