Vue 组件间通信的方式有哪些？

Vue 组件间通信的常见方式包括多种途径，适应不同组件的层级关系和场景需求：

1. Props / Attributes（父组件传子组件）
   父组件通过 HTML 属性方式向子组件传递数据。子组件需在 props 选项中定义接收项，数据是单向数据流，子组件不能直接修改。
   示例代码：

   <!-- 父组件 -->
   <template>
     <ChildComponent :message="parentMsg" />
   </template>
   <!-- 子组件 -->
   <script>
   export default {
     props: ('message')
   }
   </script>
   

2. Custom Events / $emit（子组件传父组件）
   子组件通过 this.$emit('事件名', payload) 触发自定义事件。父组件使用 v-on（或 @）侦听事件并更新数据，实现反传数据。
   示例代码：

   <!-- 子组件 -->
   <template>
     <button @click="$emit('update', 'New Value')">Update</button>
   </template>
   <!-- 父组件 -->
   <template>
     <Child @update="handleUpdate" />
   </template>
   

3. Event Bus / 事件总线（任意组件间通信）
   基于一个共享的 Vue 实例（如 const bus = new Vue()），任何组件都可调用 bus.$emit('event') 广播事件并通过 bus.$on('event', callback) 监听接收。此方式灵活适用于同级或跨层通信。

4. Vuex（状态管理库）
   用于复杂应用中的全局状态共享。组件通过 store.state 访问数据，触发 commit（mutations）或 dispatch（actions）更新状态并响应变化，实现高度统一的状态管理。
   关键机制包括 state, mutations, actions, getters。

5. Attrs/Listeners（深层次传参支持）
   $attrs 允许父组件传递未识别的属性至子组件；$listeners 则用于事件监听绑定。常用于多级组件嵌套场景。

6. Provide/Inject（跨级依赖注入）
   祖先组件通过 provide 提供数据后，子孙组件无需逐层传递即可通过 inject 注入访问数据。Vue3 对其进行了改进以支持依赖控制。

7. 访问实例: $parent/$children（非推荐方法）
   此方式允许通过 this.$parent 访问父实例或 this.$children 索引子组件，但不适用于Vue3 Composition API 和大型项目中，因其耦合性和维护代价较高。

8. 其他技术
   Refs 可用于获取组件实例后进行通信 (如 $refs)。 Session Storage / Local Storage + Vuex 可用于刷新时状态持久化处理。