uniapp使用vue3setup语法糖组件间传值

uniApp采用Vue3的Composition API（也称为setup语法糖）是为了提供更简洁、更模块化的组件开发体验。在使用setup时，我们可以利用`ref`, ` reactive`, `onMounted`, `onUpdated`, 等API来进行状态管理，尤其是对于组件间的通信。

组件间传值通常有几种方式：

1. Props（父子组件传递）：父组件通过props向下传递数据给子组件，这是最基础的传值方式。在setup语法中，你可以直接将数据作为props传入。

// 父组件
<template>
  <child-component :value="parentValue" />
</template>

<script setup>
import { ref } from 'vue'
const parentValue = ref('初始值')
</script>

2. $emit 和 $on (事件总线)：如果需要在兄弟组件之间共享数据，可以创建一个全局的自定义事件总线（Event Bus）。但是，setup语法下推荐使用`provide`和`inject`代替：

// 全局事件总线
const eventBus = createLocalStore()

// 父组件提供数据
setup() {
  provide('sharedData', someSharedData)
}

// 子组件注入数据并监听更新
setup() {
  const sharedData = inject('sharedData')
  onMounted(() => {
    watch(sharedData, () => {/* 更新操作 */})
  })
}

3. Refs：通过refs，可以在子组件内部修改父组件的状态，并在父组件中接收变化。这适用于单向数据流场景，如表单联动。

尽管setup语法简化了部分代码结构，但它并没有改变基本的组件间通信原理。结合上述方式，你可以有效地在uniApp的Vue3项目中实现组件间的数据交互。