组件通信区别
这些组件通信方式在 Vue 3 中有不同的应用场景和用法。以下是每个通信方式的简要解释和它们的区别：
1. props
props 是 Vue 组件之间通信的主要方式之一。父组件可以通过 props 向 子组件传递数据。子组件通过 defineProps() 来声明接收的数据。
- 适用场景: 父组件需要向子组件传递数据。
- 特点: 单向数据流，数据只能从父到子。
2. 自定义事件
自定义事件用于从 子组件 向 父组件 传递信息。子组件通过 $emit() 方法触发事件，父组件通过 v-on 或 @ 来监听这些事件。
- 适用场景: 子组件需要向父组件发送数据或通知事件。
- 特点: 单向事件流，通常与
props结合使用。
3. mitt
mitt 是一个轻量级的事件总线库，用于在 非父子关系的组件之间通信。通过事件总线机制，任何两个组件都可以相互通信，不需要直接的父子关系。
- 适用场景: 非父子组件的通信，例如兄弟组件。
- 特点: 使用事件发布/订阅模式，解耦组件之间的依赖。
mitt 的通信是单向的，通过发布事件和订阅事件实现组件之间的通信。
跨组件通信（兄弟组件、祖孙组件、跨层级组件）
mitt 最常见的用例就是在没有直接父子关系的组件之间传递数据或事件。通过 mitt，你可以在一个组件中发布事件，然后在另一个组件中接收和处理该事件。这使得兄弟组件、远程嵌套组件或跨层级组件可以轻松地相互通信，而不需要通过 props 或事件冒泡。
- 应用场景: 比如在表单中，子组件需要将某个数据传递到非父组件的祖先组件，或者两个独立的兄弟组件之间共享状态。
4. v-model
v-model 是 Vue 中用于创建双向数据绑定的语法糖，允许父组件与子组件之间的双向数据传递。子组件通过 modelValue 和 update:modelValue 实现绑定。
- 适用场景: 需要双向数据绑定的场景，比如表单元素的状态。
- 特点: 双向数据绑定，父子组件都可以改变数据。
5. $attrs
$attrs 是 Vue 的一个内置属性，包含父组件传递给子组件但没有在 props 中显式声明的属性。通常在组件封装时用于透传属性到子组件或 DOM 元素上。
- 适用场景: 子组件需要继承或传递父组件的所有属性（未在
props中声明）。 - 特点: 用于属性透传，避免手动定义每个
prop。
$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）,$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)
6. provide、inject
provide 和 inject 是 Vue 3 中的依赖注入机制，用于在 祖先组件和后代组件之间共享数据，而无需通过层层 props 传递。
- 适用场景: 跨越多个层级的组件通信，祖先组件向任意后代组件提供数据。
- 特点: 通过依赖注入解耦组件，允许跨层级通信。
7. pinia
pinia 是 Vue 3 官方推荐的状态管理库，替代 Vue 2 中的 Vuex。它提供全局状态管理，允许在应用的任何地方共享状态和修改数据。
- 适用场景: 全局状态管理，应用中任意组件可以访问和修改共享数据。
- 特点: 适用于复杂的状态管理，支持模块化、类型安全等特性。
8. slot
slot 是 Vue 组件的内容分发机制，允许父组件传递模板内容到子组件中。
- 适用场景: 子组件需要从父组件接收插入内容。
- 特点: 通过
slot实现灵活的组件内容分发，支持默认插槽、具名插槽和作用域插槽。
总结：
props和 自定义事件 是父子组件之间最常用的通信方式，分别用于从父到子和从子到父的单向数据流。mitt和pinia适用于跨组件或全局的通信，解耦组件之间的依赖。v-model用于双向绑定，适用于父子组件之间的双向数据流。provide/inject用于祖先和后代组件之间的通信，适合层级较深的数据传递。- **
$attrs**是 Vue 内置属性，适用于一些特殊的场景如透传属性和直接操作子组件。
这些通信方式各有侧重，选择哪一种取决于具体的组件层级和数据传递需求。