vue watch props无效

发布时间:2023年12月17日

背景


如标题所示,是因为vue watch props无效才看到这篇文章的。网上有一堆讲这个问题的解决办法。比如:watch(() => props.val1, (newValue) => {...})。但是我用Vue3.3.4尝试后,也是没有成功。可能是因为props.val1是一个Ref的问题吧,具体也没研究。
但是我这边是这样一个场景,所以需要用watch监测props的变化。
我有一个A.vue,需要通过props传给B.vue。而B.vue使用这个props构建一个ref,用于展示界面。我希望在A.vue中更改传递给B的props的值,以达到B.vue更改界面的需求。但是有一个问题,ref只在onMounted的时候,初始化一次,后面不管怎样改动props,这个ref都不会改变。所以才使用watch监测props的变化,进而重新赋值给ref。但是我没成功。
那好,那我就在B.vue中通过defineExpose导出一个函数比如reset(),专门用于给ref重新赋值给props,比如

const props = defineProps({
	propsVal: String
})
const valRef = ref(props.propsVal)

function reset() {
	valRef.value = props.propsVal
}
defineExpose({
	reset,	// 导出后,A.vue中可以调用B.vue中的reset方法
})

这样A.vue中,更改props的传入值后,调用一下B.vue的reset()就可以了。
但是这个方法,很麻烦,有时候也会出现reset() function is not define.的错误提示。

解决方案


使用计算属性computed,而不是引用ref
因为计算属性也具有响应性,也能过引起界面的更改。而且props的更改,能反映到computed属性的更改。更改一下上面的例子:

const props = defineProps({
	propsVal: String
})
const valComputed = computed(props.propsVal)

<tempate>
	<p> {{ valComputed }} </p>
</tempate>

补充


  1. 传给props的必须是一个简单类型(比如boolean、number)或者是响应式对象(比如reactive({}))。
文章来源:https://blog.csdn.net/qq_43478653/article/details/134970627
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。