当前位置: 首页 > news >正文

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 传递
  • 集中管理常用功能方法
  • 保持代码整洁和可维护性
    这相当于创建了一个全局可用的"工具箱",任何子组件都可以按需取用其中的工具方法。

相关文章:

  • 【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——USB测试 #USB HOST #USB 鼠标
  • 京东硬核挑战潜规则,外卖算法要变天?
  • 阶段性使用总结-通义灵码
  • 协程从原理到最新的c++协程特性
  • 从服务器多线程批量下载文件到本地
  • 4.14【Q】pc homework3
  • 有序二叉树各种操作实现(数据结构C语言多文件编写)
  • 基础知识:Dify 错误排查
  • 基础学习(4): Batch Norm / Layer Norm / Instance Norm / Group Norm
  • ReactNative中处理安全区域问题
  • 深入解析 OrdinalEncoder 与 OneHotEncoder:核心区别与实战应用
  • Linux——信号量
  • linux 内核 ida机制分析
  • 【SpringMVC】深入解析自定义拦截器、注册配置拦截器、拦截路径方法及常见拦截路径、排除拦截路径、拦截器的执行流程
  • 视觉SLAM和激光SLAM建图输出的文件类型
  • 域控制器升级的先决条件验证失败,证书服务器已安装
  • 基于大模型的反流食管炎手术全流程风险预测与治疗方案研究报告
  • 【钱包】Tron签名总结
  • c# 数据结构 链表篇 有关双向链表的一切
  • Vue el-from的el-form-item v-for循环表单如何校验rules(一)
  • 抗美援朝老战士宁昭逝世,享年93岁
  • 宁波市纪委监委通报4起违反中央八项规定精神典型问题
  • 华夏幸福:去年营业收入237.65亿元,同比减亏12亿元
  • 吕国范任河南省人民政府副省长
  • 李祥翔评《孔子哲学思微》︱理性秩序与美学秩序的碰撞
  • 上海“生育友好岗”已让4000余人受益,今年将推产假社保补贴政策