vue3 组件之间传值

Vue3 中，组件之间的传值有多种方式：

1. **props**：这是最常见的方式，用于从父组件向子组件传递数据。父组件通过 `props` 将数据绑定到子组件上，子组件通过 `$emit` 触发自定义事件将数据回传给父组件。

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

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

2. **父子通信**：如果需要双向数据流，可以使用自定义属性 `$attrs` 和 `$listeners`，但这已被官方推荐减少使用。

3. **vuex**：当应用状态复杂，涉及全局数据管理时，可以使用 Vuex 存储共享状态，然后通过 actions 或 getters 传递给组件。

4. **EventBus（总线模式）**：创建一个独立的 Vue 实例作为事件总线，各个组件通过发布订阅机制来传递数据，适用于单文件组件间的通信。

5. **ref + onBeforeUpdate（仅Vue3 Composition API）**：通过 `ref` 创建响应式的变量，再配合 `onBeforeUpdate` 来监听数据变化并更新其他组件。

选择哪种方式取决于具体场景和需求。