如何实现子组件向父组件传值
2021/4/20 10:55:15
本文主要是介绍如何实现子组件向父组件传值,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
自定义组件是一个开发者编写的组件,使用起来和 Native 一样,最终按照组件的<template>来渲染;同时开发起来又和页面一样,拥有 ViewModel 实现对数据、事件、方法的管理。 自定义组件也叫子组件,因为它不能独立存在,需要被引入到页面上才能生效。子组件避免一个页面的布局庞大、臃肿,而且使代码可读性好、易维护。
子组件如何向父组件传值呢?比如当子组件对数据进行改造后,如何把最终数据交给父组件呢?主要有两种方法:
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的方法。
子组件通过$dispatch()触发自定义事件,父组件通过$on()监控自定义事件的触发。
解决方案
方法一
子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件的方法,如下例子中实现了如何将子组件中的count值传递到父组件上。子组件定义了emitEvt事件(父组件中引用时,需要添加on前缀),子组件在调用$emit()时,携带了count参数,父组件在响应事件时,便可获取到参数值。
<!-- 父组件 -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < 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 -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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的值赋值给父组件。
<!-- 父组件 -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < 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 -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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
这篇关于如何实现子组件向父组件传值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-12百万架构师第十五课:源码分析:Spring 源码分析:SpringMVC核心原理及源码分析|JavaGuide
- 2025-01-11有哪些好用的家政团队管理工具?
- 2025-01-11营销人必看的GTM五个指标
- 2025-01-11办公软件在直播电商前期筹划中的应用与推荐
- 2025-01-11提升组织效率:上级管理者如何优化跨部门任务分配
- 2025-01-11酒店精细化运营背后的协同工具支持
- 2025-01-11跨境电商选品全攻略:工具使用、市场数据与选品策略
- 2025-01-11数据驱动酒店管理:在线工具的核心价值解析
- 2025-01-11cursor试用出现:Too many free trial accounts used on this machine 的解决方法
- 2025-01-11百万架构师第十四课:源码分析:Spring 源码分析:深入分析IOC那些鲜为人知的细节|JavaGuide