//父组件
<template>
<button @click="setStudentInfo">set</button>
<ChildNode :studentInfo="studentInfo"></ChildNode>
</template>
<script setup>
import {ref} from "vue"
let studentInfo = ref({});
function setStudentInfo(){
studentInfo.value = {
name:"小明",
age:20,
id:1
}
}
</script>
//子组件ChildNode
<script setup>
import {watch} from "vue"
const props = defineProps(["studentInfo"]);
watch(()=>props.studentInfo,(val)=>{
//这里监听不到studentInfo的变换
console.log(val);
})
</script>
wyyx50
- 发布：2022-07-09 09:45
- 更新：2022-07-09 11:43
- 阅读：1322
【报Bug】uni-app中使用vue3语法，子组件监听不到复杂数据类型的props变化
分类：uni-app
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10 21H1
HBuilderX类型： 正式
HBuilderX版本号： 3.4.15
第三方开发者工具版本号： 1.06.2206090
基础库版本号： 2.25.0
项目创建方式： HBuilderX
示例代码：
操作步骤：
按示例代码写个的demo即可复现
按示例代码写个的demo即可复现
预期结果：
子组件watch可监听到props的变化
子组件watch可监听到props的变化
实际结果：
watch监听无效，无任何输出
watch监听无效，无任何输出
bug描述：
uni-app中使用vue3语法，子组件监听不到复杂数据类型的props变化，代码示例如下
用你的示例,可以正常监听
// index.vue
<template>
<card :studentInfo="studentInfo"></card>
<button @tap="onSet">set</button>
</template>
<script setup>
import card from './card'
import { ref } from 'vue'
const studentInfo = ref({})
const onSet = () => {
studentInfo.value = {
name:"小明",
age:20,
id:1
}
}
</script>// card.vue
<template></template>
<script setup>
import { watch } from 'vue'
const props = defineProps(['studentInfo'])
watch(() => props.studentInfo,(val) => {
console.log(val,'监听')
})
</script>
wyyx50 (作者)
我后来发现是其他问题导致的，不是bug
2022-07-09 14:09
wyyx50 (作者)
自己发的贴子不能删除吗
2022-07-09 14:10
十二112
回复 wyyx50: 删不了
2022-07-09 14:12