最近面试被问到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)
参考