vue里provide作用:将一组全局方法注入到 Vue 应用的所有子组件中

在 Vue.js 中, provide('mainFunc', {...}) 是依赖注入(Dependency Injection)的提供者(provider)部分,它的作用是:

  1. 功能说明 :
  • 将一组全局方法注入到 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,     // 路由跳转方法
})
  1. 使用场景 :
  • 任何子组件都可以通过以下方式使用:
const mainFunc = inject('mainFunc')
mainFunc.jumpRouter('Menu') // 跳转到菜单页
  1. 设计优势 :
  • 避免了多层组件 props 传递
  • 集中管理常用功能方法
  • 保持代码整洁和可维护性
    这相当于创建了一个全局可用的"工具箱",任何子组件都可以按需取用其中的工具方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值