uniapp vue3 选项式写法不要组合式写法 父子组件传参，子组件如何更新父组件传来的值

在uni-app的Vue3中，如果你想要避免使用传统的父子组件间的props传递并改用选项式（Composition API）的思路，你可以考虑使用`setup()`函数以及`ref`或自定义 reactive 对象来管理状态。

假设你有一个父组件（Parent.vue），它通过`props`将数据传给子组件（Child.vue）。而在采用选项式写法后，你可以这样做：

**Parent.vue (传统props传参)**

<template>
  <view>
    <child :message="parentMessage" />
  </view>
</template>

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

const parentMessage = ref('这是父组件的初始消息');
</script>

**Child.vue (不再直接接收props，改用自定义响应式变量)`
<template>
<button @click="updateMessage">点击更新</button>
<div>{{ message }}</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { ref } from '@vue/reactivity';

// 在setup内部创建响应式变量
const message = ref('');

onMounted(() => {
// 子组件监听父组件的值变化
watch(
() => parentMessage.value,
newValue => {
// 更新子组件的message
message.value = newValue;
}
);
});

function updateMessage() {
// 自己控制state的变化
message.value = '这是子组件修改后的消息';
}
</script>

在这个例子中，`watch`函数用于监听`parentMessage`的变化，并自动同步到`message`，使得当父组件的数据更新时，子组件会相应地显示新值。而子组件的`updateMessage`函数则可以独立更新`message`，不需要依赖父组件的prop。