当前位置: 首页 > 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(一)
  • 泽连斯基:俄军违反停火承诺,20日10时起前线俄炮击增加
  • 观察丨微短剧盛行“拿来主义”,版权保护迫在眉睫
  • 从高铁到住房:“富足议程”能否拯救美国的进步主义?
  • 亲诚惠容行大道,命运与共开新篇——中共中央政治局委员、外交部长王毅谈习近平主席对越南、马来西亚、柬埔寨进行国事访问
  • 2025年青年普法志愿者法治文化基层行活动启动
  • 自然资源部一季度新批用海项目中,涉历史遗留围填海项目56个