Vue3 常见的 9 种组件通信机制

本文将全面讲解 Vue.js 中常用的组件通信机制，帮助你理解如何高效地在组件之间传递数据。

一、概述

我们将涵盖以下关键概念：

• Props / Emit:  用于父组件向子组件传递数据以及子组件向父组件发出事件通知。

• Provide / Inject:  用于父组件向所有后代组件提供数据，实现依赖注入。

• Pinia:  一个现代化的 Vue 状态管理库，替代了传统的 Vuex。

• Expose / Ref:  用于父组件直接访问子组件的实例或元素。

• Attrs:  用于获取父组件传递给子组件的非 prop 属性。

• v-Model:  用于实现双向数据绑定。

• mitt.js:  一个事件总线库，用于跨组件通信。

• Slots:  用于父组件控制子组件部分内容，实现组件模板的灵活性和可重用性。

二、Props / Emit

2.1 父组件向子组件传递数据

父组件通过 props 属性将数据传