uni-app中的三种组件通信

本文详细介绍了Vue中组件间的通信方式,包括如何使用props从父组件向子组件传递值,以及通过$emit实现子组件向父组件的通信。同时,还阐述了利用uni-app的全局事件uni.$on和uni.$emit来实现兄弟组件之间的数据传递。这些方法是理解和应用Vue组件通信的基础。
摘要由CSDN通过智能技术生成

#父组件向子组件传值
## 通过props来实现 在父组件中有一个num值想要传递给子组件,首先要自定义一个 绑定事件 绑定事件的值是要传递的参数,然后在子组件中通过props来接收这个绑定的值就可以了。

#子组件向父组件传值
## 通过$emit来实现的,首先在子组件中定义一个按钮点击这个按钮会向父组件传值,给这个按钮绑定一个点击事件通过$emit自定义一个事件的名称,并且附带传递的参数位要给父组件的值,然后在父组件中的注册子组件的位置绑定子组件定义的函数给一个事件,然后在父组件中定义这个事件处理函数拿到这个传递来的值

#兄弟组件之间的通信
## 这里需要通过uni-app的函数来实现,分别是  uni-$on 监听全局自定义事件  和   uni-$emit 触发全局自定义事件 来实现 首先在a组件中有一个值 num 我们需要在a组件中created钩子中声明一个 全局监听自定义函数 uni-$on('add',num=>{ this.num+=num })  然后在b组件中定义一个事件处理函数 uni-$emit('add',10) 这样子我们在点击b组件中的按钮的时候就可以事件改变a组件中的数据的值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值