VUE3父子组件defineModel动态值获取及处理

需求：子组件获取父组件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>