Vue3使用setup监听props实现方法详解
作者：黄金原野
这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章！