uniapp vue3 选项式 父子组件传参，子组件如何更新父组件传来的值

在 UniApp 的 Vue3 中，如果你想要在父子组件之间使用选项式 (Props) 进行数据传递，并让子组件的改变自动更新到父组件，你可以遵循这样的步骤：

1. **定义父组件**:
在父组件的模板中，将需要传递给子组件的数据通过 Props 属性声明并绑定到一个变量上，比如 `parentValue`:

   <template>
     <view>
       <child-component :value="parentValue" />
       <button @click="updateParentValue">更新父值</button>
     </view>
   </template>

   <script setup>
     import ChildComponent from '@/components/ChildComponent.vue';

     const parentValue = ref("初始值");
     async function updateParentValue() {
       // 更新逻辑...
     }
   </script>

2. **子组件接收和更新**:
在子组件 `ChildComponent.vue` 的 props 接收部分，声明接收到的 `value` 参数，并可以在内部处理它的变化：

   <template>
     <input v-model="localValue" />
     <!-- 当 localValue 改变时，可以通过自定义事件通知父组件 -->
     <button @click="handleChange">提交更改</button>
   </template>

   <script setup>
     import { onMounted, watch } from 'vue';
     import { defineEmits } from 'vue3';

     // 定义子组件的 emit 事件
     const emit = defineEmits(['updateValue']);

     // 初始化 localValue
     let localValue = ref("");

     onMounted(() => {
       // 如果父组件传来了值，赋值给 localValue
       localValue.value = toRef(parent.$props.value);
     });

     // 当 localValue 发生改变时，emit 更新值给父组件
     function handleChange() {
       emit('updateValue', localValue.value);
     }

     // 使用 watch 可以监听 value 的变化
     // watchEffect 或 watch 只会在 prop 的值发生变化时执行回调
     // watch(parent.$props.value, () => {
     //   // 当父组件的 value 变化，这里可以做相应处理
     // });
   </script>

在这个例子中，当子组件的输入框值改变并通过 `handleChange` 函数触发，它会通过 `updateValue` 自定义事件通知父组件更新 `parentValue`。父组件只需监听这个事件并调用自己的更新函数即可。