组件间通信

组件间通信

1. 父组件属性 -> 子 props
2. （non-props）父组件属性 -> 子 js this.$attrs
3. 自定义事件 emits
4. 插槽 slot
5. Vuex/Pinia
6. provide/inject

常用的通信方式（ai）

Vue.js 提供了多种方式来实现组件间的通信。以下是一些常用的通信方式：
7. Props 和 Events：

• 父子组件通信：父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 向父组件发送事件。

8. Event Bus：
   • 非父子组件通信：可以使用一个空的 Vue 实例作为中央事件总线，各个组件可以通过这个事件总线发射和监听事件。
9. Vuex：
   • 状态管理库：适用于复杂应用，可以跨组件共享状态，实现组件间的数据同步。
10. Provide / Inject：

• 祖先组件可以提供数据，后代组件可以注入这些数据，不需要使用 props 链。

11. Refs：

• 通过 $refs 访问子组件的方法和数据，适用于直接父子关系。

12. $attrs 和 $listeners：

• $attrs 包含父作用域中不作为 prop 被识别（且获取）的属性绑定（class 和 style 除外），可以在子组件中通过 $attrs 访问。
• $listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以让我们在子组件中访问父组件的 v-on 事件监听器。

13. $parent 和 $children：

• 通过 $parent 访问父组件实例，通过 $children 访问子组件实例数组。

14. 插槽 (Slots)：

• 子组件可以通过插槽向父组件暴露内容，父组件可以将内容插入到子组件的模板中。

15. 全局状态管理：

• 除了 Vuex，还可以使用其他全局状态管理库，如 Pinia。

16. Lodash/RxJS/MobX：
    • 使用这些库可以帮助管理跨组件的状态，尤其是在复杂的应用中。
17. Vue 3 Composition API：
    • Vue 3 引入的 Composition API 提供了 provide 和 inject 函数，使得跨组件的状态共享更加方便。
18. Custom Directives：
    • 自定义指令可以在不改变组件结构的情况下，实现跨组件的交互。
      选择哪种通信方式取决于具体的应用场景和需求。例如，对于简单的父子组件通信，props 和 events 就足够了；而对于大型应用，可能需要使用 Vuex 或其他状态管理库来管理全局状态。在设计组件通信时，应考虑代码的可维护性和可扩展性。