new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · all subjects

provide-inject

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

provide inject definition

provide and inject are a form of inter-component communication. When a component provides a value, all descendants of that component can then choose to grab that value using inject. Unlike with props, the providing component doesn't know precisely which component is receiving the value. provide and inject are sometimes used to avoid prop drilling and can also be used as an implicit way for a component to communicate with its slot contents. provide can also be used at the application level, making a value available to all components within that application.

provide() function signature and type

The provide() function has the signature: function provide<T>(key: InjectionKey<T> | string, value: T): void. It takes two arguments: the key (which can be a string or a symbol) and the value to be injected.

provide() must be called synchronously during setup phase

Similar to lifecycle hook registration APIs, provide() must be called synchronously during a component's setup() phase.

InjectionKey TypeScript utility type

When using TypeScript, the key can be a symbol casted as InjectionKey - a Vue provided utility type that extends Symbol, which can be used to sync the value type between provide() and inject().

provide() example with static and reactive values

Example of provide() usage: ```vue <script setup> import { ref, provide } from 'vue' import { countSymbol } from './injectionSymbols' // provide static value provide('path', '/project/') // provide reactive value const count = ref(0) provide('count', count) // provide with Symbol keys provide(countSymbol, count) </script> ```

inject() function signatures

The inject() function has three overloads: 1. Without default value: function inject<T>(key: InjectionKey<T> | string): T | undefined 2. With default value: function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T 3. With factory: function inject<T>(key: InjectionKey<T> | string, defaultValue: () => T, treatDefaultAsFactory: true): T

inject() value resolution and shadowing

Vue walks up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provide the same key, the one closest to the injecting component will shadow those higher up the chain and its value will be used. If no value with matching key is found, inject() returns undefined unless a default value is provided.

inject() default value as factory function

The second argument to inject() can be a factory function that returns values that are expensive to create. In this case, true must be passed as the third argument (treatDefaultAsFactory: true) to indicate that the function should be used as a factory instead of the value itself.

inject() must be called synchronously during setup phase

Similar to lifecycle hook registration APIs, inject() must be called synchronously during a component's setup() phase.

inject() example with various usage patterns

Example of inject() usage: ```vue <script setup> import { inject } from 'vue' import { countSymbol } from './injectionSymbols' // inject static value without default const path = inject('path') // inject reactive value const count = inject('count') // inject with Symbol keys const count2 = inject(countSymbol) // inject with default value const bar = inject('path', '/default-path') // inject with function default value const fn = inject('function', () => {}) // inject with default value factory const baz = inject('factory', () => new ExpensiveObject(), true) </script> ```

hasInjectionContext() function signature and purpose

The hasInjectionContext() function has the signature: function hasInjectionContext(): boolean. It returns true if inject() can be used without warning about being called in the wrong place (e.g. outside of setup()). This method is designed to be used by libraries that want to use inject() internally without triggering a warning to the end user. It is only supported in Vue 3.3+.

Give your agent this brain