uniapp vue3 Options API 父子组件传参，子组件如何更新父组件传来的值

uniApp中使用Vue3的Options API模式开发时，父子组件间的传参通常是通过props来进行的。当子组件需要更新从父组件传递过来的值时，有以下几种常见的做法：

1. **简单属性修改**：如果传递的是简单的数据类型，如字符串、数字等，子组件可以直接修改这个属性，Vue会自动检测到并通知父组件更新视图。

// 子组件
export default {
  props: {
    parentValue: String // 假设这是一个字符串类型的prop
  },
  data() {
    return {
      childValue: '这是子组件默认值'
    }
  },
  watch: {
    parentValue(newVal) {
      this.childValue = newVal; // 当parentValue改变时，同步更新childValue
    }
  }
}

2. **深度监听（deep watcher）**：如果需要监听深层的对象或数组变化，可以使用`$watch`并设置`immediate: true`和`deep: true`，以便及时更新。

// 子组件
this.$watch('parentValue', (newVal) => {
  this.childValue = newVal;
}, { immediate: true, deep: true });

3. **自定义事件（emit）**：如果修改后的值需要告知父组件主动触发更新，可以在子组件里触发一个自定义事件，父组件监听这个事件并手动更新。

// 子组件
methods: {
  updateChildValue() {
    this.$emit('updateParentValue', this.childValue);
  }
},
...
<template>
  <button @click="updateChildValue">更新父组件</button>
</template>

然后，在父组件的模板中接收并处理这个事件：

<template>
  <div>
    {{ parentValue }}
    <ChildComponent :parentValue="parentValue" @updateParentValue="handleUpdate"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleUpdate(value) {
      this.parentValue = value;
    }
  }
};
</script>