Vue3组件通讯六种方式

1. Props

Props 是 Vue.js 中最基本的组件通信方式之一，用于父组件向子组件传递数据。Props 是一种单向数据流，即父组件通过 props 将数据传递给子组件，子组件接收这些 props 并在内部使用它们，但不能直接修改它们。在 Vue3 中，可以使用 defineProps 宏来声明 props。

2. Emits

Emits 用于子组件向父组件发送消息或触发事件，并可以传递数据。在 Vue3 的 <script setup> 语法中，可以使用 defineEmits 宏来声明子组件可以触发的事件。父组件通过监听这些事件并定义相应的方法来接收子组件传递的数据。

3. Provide / Inject

Provide / Inject 是 Vue3 中新增的一种组件通信方式，用于实现跨层级的组件通信，即祖先组件向后代组件传递数据，而无需逐层传递 props。Provide 是在祖先组件中使用的，通过 provide 方法可以向子孙组件提供数据；Inject 是在后代组件中使用的，通过 inject 方法可以获取祖先组件提供的数据。

4. Pinia

Pinia 是 Vue 的状态管理库，用于集中化管理全局状态。它简化了 Vuex 的复杂性，并提供了更简洁的 API。Pinia 通过 state、getters 和 actions 来管理状态，其中 state 用于存储数据，getters 用于获取和过滤数据，actions 用于修改 state。Pinia 使得跨组件共享状态变得更加容易和高效。

5. attrs和listeners（在 Vue 3 中已合并到 $attrs）

在 Vue 2 中，$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶组件时非常有用。而在 Vue 3 中，$listeners 已经被移除，所有的监听器都包含在了 $attrs 对象中。

6. $refs

$refs 是一种用于直接访问 DOM 元素或子组件实例的方式。通过在模板中给元素或子组件添加 ref 属性，并在组件的 setup 函数或 methods 中通过 this.$refs（在 <script setup> 中是 ref 变量本身）访问对应的 DOM 元素或子组件实例。这可以用于父组件直接调用子组件的方法或访问子组件的数据。