需求：子组件获取父组件value值时需处理，子组件加载时用onMounted，value变化时用watch
父组件：
<template><div><p>父组件的值: {{ parentValue }}</p><button @click="changeValue">改变值</button><ChildComponent v-model:value="parentValue" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';// 定义父组件的值
const parentValue = ref('初始值');// 改变值的函数
const changeValue = () => {parentValue.value = '新的值';
};
</script> 子组件：
<template><div><p>子组件处理后的值: {{ processedValue }}</p></div>
</template><script setup>
import { defineModel, onMounted, watch, ref } from 'vue';// 使用 defineModel 接收 value
const value = defineModel();// 用于存储处理后的值
const processedValue = ref('');// 处理值的函数
const processValue = (val) => {return val + ' 已处理';
};// 子组件加载时获取并处理值
onMounted(() => {const initialValue = value.value;processedValue.value = processValue(initialValue);console.log('子组件加载时获取到的值:', initialValue);
});// 监听 value 的变化
watch(value, (newValue) => {processedValue.value = processValue(newValue);console.log('父组件值变化，子组件接收到新值:', newValue);
});
</script> 
