Vue3中使用setup监听props

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3中使用setup监听props相关的知识,希望对你有一定的参考价值。

参考技术A 子组件展示父组件传来的参数,展示的信息随着父组件上tab的切换动态更新。

一开始的想法是单独监听这个传递的参数,但看了VUE3的文档之后,似乎对参数的监听必须精确到属性。例如参数为

需要在子组件的watch中写明监听的是name还是gender。
该参数中有很多可能会改变的属性,一一监听过于麻烦。所以改变思路,使用监听props来获取所有所有传参。

在父组件中,用于传递给子组件的参数必须为响应式(eg. reactive),否则子组件在监听时不会监测到变换,watch永远不会生效

immediate是立即开始监听,在页面首次渲染时可能为显示为undefined,如果watch的变化需要手动触发,不需要开启

deep默认开启,可以忽略(参数为reactive,会默认开启deep,如果是ref,则不会默认开启deep)

以上是关于Vue3中使用setup监听props的主要内容,如果未能解决你的问题,请参考以下文章

vue3之watch监听

vue3.2如何监听props传递过来的数据。

初识vue3-setup语法糖,ref和reactive语法,computde计算属性,watch开启监听

vue3的基本数据类型监听和引用数据类型的监听

vue3中如何优雅地在 setup 使用 globalProperties

熬夜讲解vue3组合API中setup refreactive的用法