Vue3使用setup监听props实现方法详解
背景描述
子组件展示父组件传来的参数,展示的信息随着父组件上tab的切换动态更新。
一开始的想法是单独监听这个传递的参数,但看了VUE3的文档之后,似乎对参数的监听必须精确到属性。例如参数为
{ name: 'Doctor', gender: 'Timelord' }
需要在子组件的watch
中写明监听的是name
还是gender
。
该参数中有很多可能会改变的属性,一一监听过于麻烦。所以改变思路,使用监听props来获取所有所有传参。
实现方法
在父组件中,用于传递给子组件的参数必须为响应式(eg. reactive
),否则子组件在监听时不会监测到变换,watch永远不会生效
immediate
是立即开始监听,在页面首次渲染时可能为显示为undefined,如果watch的变化需要手动触发,不需要开启
deep
默认开启,可以忽略(参数为reactive,会默认开启deep,如果是ref,则不会默认开启deep)
// 父组件 <script> export default { setup() { let traveller = reactive({ name: 'Doctor', gender: 'Timelord' }) } } </script>
// 子组件 <script> export default { props: { traveller: { type: Object } } setup(props) { watch( props, (old, newProps) => { console.log('=======', newProps); //这里看到新值 }, // { // immediate: true, // deep: true // } ) } } </script>
以上就是Vue3使用setup监听props实现方法详解的详细内容,更多关于Vue3 setup监听props的资料请关注脚本之家其它相关文章!
相关文章
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
这篇文章主要介绍了vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论