uni-app vue3+ts 父组件向子组件传值,子组件不更新值

本文探讨了uni-app小程序中Vue3父子组件间传递值时遇到的响应失效问题,重点介绍了如何通过`toRefs`函数将对象转换为响应式,并提供了两种解决方案:一是直接使用,二是配合toRefs确保动态更新。
摘要由CSDN通过智能技术生成

项目场景:

vue3父子组件传值


问题描述

uni-app小程序项目中,父组件向子组件中传值的时,子组件的接受到的数据没有更新,失去响应。


原因分析:

父组件传值进入到子组件使用解构的话会失去了响应,所以值不会改变


解决方案:

1、使用vue3中的toRefs对解构的对象, 解构的时候必须要加toRefs 不然会失去响应

import { toRefs } from 'vue'
const { title, isArrow, isHome} =toRefs(props)

如下代码展示,我在onLoad对isShare进行了重新赋值,当我子组件接收值的时候没解构没有进行toRefs转换的时候,值是不会进行动态改变的
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
当加上toRefs转换的时候会看到onLoad中修改的值就会改变
在这里插入图片描述
在这里插入图片描述
2、直接使用,不使用解构的方式在这里插入图片描述

Vue 3和UniApp中,组件向子组件参主要通过**props属性来实现**。以下是具体的步骤: 1. **引入组件**:在组件的文件内,使用import语句来引入组件。 2. **注册组件**:在组件的`components`选项中注册引入的组件。 3. **数据**:在组件的模板中,使用`v-bind`指令或者简写的冒号`:`将数据绑定到组件的属性上。 4. **接收数据**:在组件内部,使用`props`选项来声明并接收来自组件数据。 5. **事件通信**:如果需要组件组件递事件或数据,可以在组件内部使用`$emit`方法触发自定义事件,并在组件中监听这个事件。 6. **对象**:当需要递的数据是对象时,可以直接将对象作为属性绑定到组件上,组件通过props接收并在模板中使用。 7. **数组**:如果组件需要入数组并由组件进行循环渲染,可以将数组作为属性递给组件组件通过props接收并在模板中使用循环指令展示数组内容。 8. **模板示例**:在组件的模板中,可以通过绑定属性的方式将数据递给组件,如`<child-component :message="parentMessage"></child-component>`,其中`:message`是组件的一个prop,`parentMessage`是组件中定义的一个变量。 9. **组件接收**:在组件的`script setup`中,使用`defineProps`来定义接收的props,然后在模板中通过`{{ message }}`这样的方式显示递过来的数据。 此外,相关的具体代码示例可以参考各个步骤中提供的链接。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值