Vue3使用setup监听props实现方法详解
更新时间：2023年08月20日 16:13:06 作者：黄金原野
这篇文章主要为大家介绍了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如何优雅的清除定时器，感兴趣的可以了解一下2021-07-07
这篇文章主要给大家介绍了关于vue3标签中的ref属性详解及如何使用$refs获取元素的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-11-11
这篇文章主要为大家详细介绍了vue滚动轴插件better-scroll的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
在vue3中父组件访问子组件中的属性和方法是需要借助于ref,苏哦一本文小编给大家介绍了vue3父组件如何使用ref获取获取子组件的属性和方法,文中详细的代码讲解,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印,废话不多说,直接手摸手上代码,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了antd select 多选限制个数,实现思路和核心代码都很简单，其中核心代码在于disabled，代码简单易懂需要的朋友可以参考下2022-11-11
在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于VUE3+vite项目中动态引入组件与异步组件的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue全家桶-vuex深入讲解，文章内容详细，简单易懂，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2023-01-01
element-ui table行点击获取行索引（index）并利用索引更换行顺序
这篇文章主要介绍了element-ui table行点击获取行索引（index）并利用索引更换行顺序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论