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-router后台鉴权流程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
在Vue3中,defineProps()函数是定义和接收组件属性的主要方式,通过简单定义或对象定义,开发者可以灵活地接收并处理组件上的属性值,简单定义方式通过数组传递属性名,而对象定义则可以约束属性的数据类型、默认值及是否必须传递等2024-09-09
这篇文章主要介绍了vue项目中$t()的意思是什么，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下2018-11-11
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于vue中Axios的封装与API接口的管理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
这篇文章主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下2018-08-08
Axios是一个功能强大、易用性高的HTTP库,适用于大多数的前端项目,它提供了丰富的功能和灵活的配置选项,可以满足不同项目的需求,这篇文章主要介绍了vue中使用axios的作用,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了vue.js+Element实现增删改查，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
最新评论