vue3父组件改变 子组件不改变(uniapp)

项目中遇到了这么个问题

场景:封装select组件,通过子组件选中后传递值给父组件,父组件需要回显这个值(这里使用 defineProps和defineEmits就可以实现,或者直接使用defineModel也可以实现,但是uniapp目前不支持),使用后父组件确实是拿到值了,但是子组件回显不出来,打印父组件确实是有这个值并且是响应式的

排查结果:子组件在接收defineProps的时候是处于setup生命周期里面,也就是只会触发一次defineProps,所以子组件接收不到后续的值

解决方法:

1:使用定时器定时拿取defineProps

结果:性能消耗过大,并且你封装肯定不止一个地方使用,直接pass

2:使用watch监听

javascript 复制代码
watch(()=>echo.value,(New, Old) => {
console.log(`新值:${New} --------- 老值:${Old}`)
})

结果:监听不到这个值的变化

3:使用watchEffect监听

javascript 复制代码
watchEffect(() => {
        echo.value = data.value
    })

结果:成功解决,在这个函数里再赋一次值即可

官方地址:响应式 API:核心 | Vue.js

相关推荐
总要学点什么8 分钟前
第106篇:三维特效-流动线效果——让一颗光点沿整条线一路滚到头
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
2分钟速写快排7 小时前
孔乙己的茴字有多少种写法?|AI 对话实时通信的三种实现
前端·javascript·github
Penge6669 小时前
JavaScript:BOM 详解
前端
梯度下降者9 小时前
Nuxt框架
vue.js·服务端渲染·全栈开发·混合渲染·nuxt框架
Penge66610 小时前
Vite vs Webpack:前端构建工具原理与实战
前端
Penge66610 小时前
前端包管理工具:npm、Yarn、pnpm 快速入门
前端
Penge66610 小时前
Sass 了解
前端
Penge66611 小时前
Webpack 打包从 0 到 1 实战笔记
前端
Penge66611 小时前
Webpack 入门:是什么、为什么需要、怎么使用?
前端
Penge66611 小时前
Ant Design(Antd)了解
前端