vue,provide和inject,备忘

在Vue.js应用中,provideinject 是一对API,用于实现组件间的跨层级依赖注入。provide 在父组件中定义要向下传递的属性或方法,而 inject 在子组件中声明它需要从祖先组件那里注入的属性。

具体到您的例子:

javascript 复制代码
// 在根组件或任意中间组件中提供数据
const app = createApp({...});
app.provide('appProvided', 'value'); // 在Vue 3中,可能是app.config.globalProperties.provide(...)
// 或在setup函数中
setup() {
  provide('appProvided', 'value');
}

// 在子组件或孙子组件中注入并使用这个数据
export default {
  setup() {
    const appProvided = inject('appProvided');
    console.log(appProvided); // 输出: 'value'
    // 现在可以在子组件中使用appProvided变量了
  }
}

这意味着通过在应用或某个祖先组件中调用 provide('appProvided', 'value'),任何在其下的子孙组件都可以通过 inject('appProvided') 来获得这个值 'value'

这种方法特别适合于全局状态管理或者需要跨越多层嵌套关系的组件之间传递数据。不过要注意的是,Vue官方推荐在大型项目中使用Vuex进行状态管理,而非过度依赖于 provideinject,因为它可能导致组件间的耦合度增加,影响代码的可读性和可维护性。

相关推荐
哎呦你好9 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放18 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao34 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo34 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er40 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年44 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing1 小时前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html