Vue3中组件通信方式有哪些

最近面试被问到Vue中组件通信方式有哪些，之前看过但答得还不是很好，看了一些博客和Vue官方文档，现总结如下：

• 传递 props（父组件向子组件中传递数据）

• 监听事件（子组件与父组件进行交互，父组件通过 v-on 或 @ 来监听子组件上抛的事件，子组件通过调用内置的 $emit 方法，通过传入事件名称来抛出一个事件）

和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。

• 事件总线（Vue3中使用mitt实现事件总线）

• 依赖注入（避免Prop 逐级透传问题，provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。）

• 通过插槽来分配内容（使用 <slot> 作为一个占位符）

• 用响应式 API 做简单状态管理（如果你有一部分状态需要在多个组件实例间共享，你可以使用 reactive() 来创建一个响应式对象，并将它导入到多个组件中）

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0
})

• Pinia或Vuex（状态管理库，对于新的应用，建议使用 Pinia）

参考

组件通信的6种方式

Vue3 事件总线

如何在Vue3中使用事件总线
依赖注入
状态管理