vue3中watch监听多个动态传值

父组件传值给子组件时，动态监听父组件的值，然后调用监听的值

父组件内容：

<!-- 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>

父组件传多个值就需要多个监听，然后刷新此页面。