父组件传值给子组件时,动态监听父组件的值,然后调用监听的值
父组件内容:
<!-- Father.vue -->
<template>
<Child
title="用户信息"
:index="1"
:uid="id"
:uname="name"
/>
</template>
<script>
import Child from './Child.vue'
const id=ref(1234)
const name = ref('小米')
</script>
通过子组件去接收父组件的值:
<script setup>
const props = defineProps({
uid: {
type: Number,
default: () => ''
},
uname: {
type: String,
default: () => ''
}
)
//监听父组件传过来的值
watch(
() => props.uid,
(newValue, oldValue) => {
console.log(newValue, oldValue)
}
)
watch(
() => props.uname,
(newValue, oldValue) => {
console.log(newValue, oldValue)
},
//深度监听
{deep:true}
)
</script>
父组件传多个值就需要多个监听,然后刷新此页面。