components: provide-inject

12 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 option type and purpose

The provide option allows an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is. It accepts either an object or a function that returns an object. The object contains properties available for injection into descendants. You can use Symbols as keys in this object.

provide option syntax: object and function forms

The provide option type signature is: interface ComponentOptions { provide?: object | ((this: ComponentPublicInstance) => object) }. It can be an object literal with key-value pairs, or a function that returns an object. When using a function form, you have access to 'this' for per-component state.

provide with Symbols example

Example showing how to use Symbols as keys in provide: const s = Symbol(); export default { provide: { foo: 'foo', [s]: 'bar' } }

provide function form for reactive state

When providing component state, use a function form: export default { data() { return { msg: 'foo' } }, provide() { return { msg: this.msg } } }. However, note that the provided msg will NOT be reactive.

provided values are not reactive by default

Values provided through the provide option are NOT reactive. If you need to provide reactive values, the provided value itself must be a reactive object; properties on that reactive object will remain reactive.

inject option type signature

The inject option type is: interface ComponentOptions { inject?: ArrayInjectOptions | ObjectInjectOptions }, where ArrayInjectOptions = string[], and ObjectInjectOptions = { [key: string | symbol]: string | symbol | { from?: string | symbol; default?: any } }

inject as array of strings

The inject option can be an array of strings representing the keys to inject: export default { inject: ['foo'], created() { console.log(this.foo) } }

inject as object with local binding names

The inject option can be an object where keys are local binding names and values specify what to inject. The value can be a string or Symbol to search for, or an object with 'from' and 'default' properties.

inject with default value

To provide optional injection with a default value: const Child = { inject: { foo: { default: 'foo' } } }. The injected property will be undefined if neither a matching property nor a default value is provided.

inject with different source name using 'from'

To inject from a property with a different name, use the 'from' property: const Child = { inject: { foo: { from: 'bar', default: 'foo' } } }

inject with factory function for non-primitive defaults

When injecting non-primitive values with defaults, use a factory function to avoid sharing values between component instances: const Child = { inject: { foo: { from: 'bar', default: () => [1, 2, 3] } } }

injected bindings are not reactive

Injected bindings are NOT reactive. This is intentional behavior. However, if the injected value itself is a reactive object, properties on that object do remain reactive.

Give your agent this brain