在 Vue 3 中，可以通过使用 watch 函数来监听父组件中的 receivedValue。watch 函数允许你在某个数据属性发生变化时执行相应的操作。
这里是如何在父组件中监听 receivedValue 的一个完整示例：
子组件
子组件负责触发一个事件，并将值作为参数传递给该事件。
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="sendValue">点击发送值</button>
</div>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['valueSent']);
function sendValue() {
const valueToSend = 'Hello from Child';
emit('valueSent', valueToSend);
}
</script>
父组件
父组件监听子组件的事件，并使用 watch 函数监听 receivedValue 的变化。
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent @valueSent="handleValueSent" />
<p>从子组件接收到的值: {{ receivedValue }}</p>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import ChildComponent from './ChildComponent.vue';
const receivedValue = ref('');
// 定义处理事件的方法
function handleValueSent(value) {
receivedValue.value = value;
}
// 使用 watch 函数监听 receivedValue 的变化
watch(receivedValue, (newValue, oldValue) => {
console.log(`receivedValue changed from ${oldValue} to ${newValue}`);
// 在这里执行你想要的操作
});
</script>
说明
watch函数监听receivedValue，每当receivedValue发生变化时，它都会执行回调函数。在这个回调函数中，newValue是新值，oldValue是旧值。handleValueSent方法用于接收子组件传递的值，并将其赋值给receivedValue。
通过这种方式，父组件不仅能够接收子组件传递的值，还能够实时监控该值的变化，并在变化时执行相应的逻辑。
