注入由祖先组件或应用程序提供的值(通过 app.provide()
)。
类型
// without default value
function inject<T>(key: InjectionKey<T> | string): T | undefined
// with default value
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
// with factory
function inject<T>(
key: InjectionKey<T> | string,
defaultValue: () => T,
treatDefaultAsFactory: true
): T
细节
第一个参数是注入 key 。 Vue 将沿着父链查找具有匹配键的提供值。如果父链中的多个组件提供相同的 key ,则最接近注入组件的一个将"shadow" 那些更高的链。如果未找到具有匹配键的值,则 inject()
将返回 undefined
,除非提供了默认值。
第二个参数是可选的,是在没有找到匹配值时使用的默认值。它也可以是一个工厂函数来返回创建成本高的值。如果默认值是一个函数,那么false
必须作为第三个参数传递,以指示该函数应该用作值而不是工厂。
与生命周期钩子注册 API 类似,inject()
必须在组件的 setup()
阶段同步调用。
使用 TypeScript 时,键的类型可以是 InjectionKey
- 扩展 Symbol
的 Vue-provided 实用程序类型,可用于在 provide()
和 inject()
之间同步值类型。
示例
假设父组件已提供如前面 provide()
示例所示的值:
<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
// inject static value with default
const foo = inject('foo')
// inject reactive value
const count = inject('count')
// inject with Symbol keys
const foo2 = inject(fooSymbol)
// inject with default value
const bar = inject('foo', 'default value')
// inject with default value factory
const baz = inject('foo', () => new Map())
// inject with function default value, by passing the 3rd argument
const fn = inject('function', () => {}, false)
</script>
相关用法
- Vue.js inject用法及代码示例
- Vue.js inheritAttrs用法及代码示例
- Vue.js useSSRContext()用法及代码示例
- Vue.js app.directive()用法及代码示例
- Vue.js mergeProps()用法及代码示例
- Vue.js app.config.warnHandler用法及代码示例
- Vue.js pipeToWebWritable()用法及代码示例
- Vue.js app.use()用法及代码示例
- Vue.js v-pre用法及代码示例
- Vue.js h()用法及代码示例
- Vue.js serverPrefetch用法及代码示例
- Vue.js customRef()用法及代码示例
- Vue.js <Transition>用法及代码示例
- Vue.js mixins用法及代码示例
- Vue.js ComponentCustomProps用法及代码示例
- Vue.js reactive()用法及代码示例
- Vue.js ComponentCustomProperties用法及代码示例
- Vue.js app.mount()用法及代码示例
- Vue.js <component>用法及代码示例
- Vue.js createRenderer()用法及代码示例
- Vue.js onMounted()用法及代码示例
- Vue.js createApp()用法及代码示例
- Vue.js app.config.errorHandler用法及代码示例
- Vue.js v-on用法及代码示例
- Vue.js components用法及代码示例
注:本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 inject()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。