vue3 子组件和子组件传值

Vue3 中，子组件与父组件之间的数据传递主要有以下几种方式：

1. **props** (属性绑定)：这是最常用的父子组件间通信的方式。父组件通过`props`向下传递数据给子组件，子组件则作为只读接收者，不能修改传递过去的值。例如：

// 父组件
<template>
  <child-component :data="parentData" />
</template>

<script>
export default {
  data() {
    return { parentData: 'Hello from parent' };
  }
};
</script>

   // 子组件
   <template>
     <div>{{ data }}</div>
   </template>

   <script>
   export default {
     props: ['data']
   };
   </script>

2. **props的自定义类型（sync修饰符）**: 对于需要双向绑定的数据，可以使用 `v-model` 或者 `sync`修饰符，但这种方式仅适用于简单的数据类型。

3. **$emit** 和 **$on**：子组件通过 `$emit` 触发自定义事件将数据传递回父组件，然后父组件监听这个事件并处理数据。这种方法适用于复杂的状态变更场景。

4. **Vuex**：当应用变得庞大且有状态管理需求时，可以使用 Vuex 容器状态管理库来共享数据，子组件通过注入 store 来获取数据。

5. **Provide/Inject**：这是一种更底层的父子组件通信机制，适用于需要在组件树深处共享数据的情况。

对于兄弟组件间的通信，Vue 提供了 `$refs`、自定义事件和全局事件 bus（如 VueX 的 action、mutation 或者第三方库如 Vue Event Bus）等方式。