在 Vue.js 中, provide('mainFunc', {...})
是依赖注入(Dependency Injection)的提供者(provider)部分,它的作用是:
- 功能说明 :
- 将一组全局方法注入到 Vue 应用的所有子组件中
- 子组件可以通过 inject 接收这些方法
import { provide, ref, onMounted } from 'vue';
function jumpRouter(name: string, query: any = {}) {
router.push({
name: name,
query: query
})
}
function getUserInfo() {
return headerRef.value.getUserInfo();
}
provide('mainFunc', {
getUserInfo, // 获取当前用户信息
jumpRouter, // 路由跳转方法
})
- 使用场景 :
- 任何子组件都可以通过以下方式使用:
const mainFunc = inject('mainFunc')
mainFunc.jumpRouter('Menu') // 跳转到菜单页
- 设计优势 :
- 避免了多层组件 props 传递
- 集中管理常用功能方法
- 保持代码整洁和可维护性
这相当于创建了一个全局可用的"工具箱",任何子组件都可以按需取用其中的工具方法。