Muban

Provide / Inject

The provide and inject APIs allow you to pass information from parents to child outside of the normal component APIs, and works on any deeply nested child component instead of only on direct children.

It's highly inspired by the provide / inject in the new Vue Composition APIopen in new window with some additional utils, so please read up their documentation first!.

Provide

Provides a value to any child component.

declare function provide<T>(key: InjectionKey<T> | string, value: T): void;
1

Example

defineComponent({
  setup() {
    const location = ref('here');
    provide('location', location);

    return [];
  }
})
1
2
3
4
5
6
7
8

Inject

Injects a provided value from the parent into a child component.

// no default value
declare function inject<T>(
  key: InjectionKey<T> | string
): T | undefined;

// default value
declare function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T,
  treatDefaultAsFactory?: false,
): T;

// factory function generates default value
declare function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T | (() => T),
  treatDefaultAsFactory: true,
): T;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Example

defineComponent({
  setup() {
    const location = inject('location');
    // location.value contains 'here'

    return [];
  }
})
1
2
3
4
5
6
7
8

createContext

A helper function to create a typed provide/inject pair sharing the same key.

declare function createContext<T>(key: InjectionKey<T> | string, defaultValue?: T): [
  provideContext: (value?: T) => void,
  useContext: (defaultValue?: T | (() => T), treatDefaultAsFactory?: boolean) => T
];
1
2
3
4

Example


const [provideLocation, useLocation] = createContext<string>('location');

// parent
defineComponent({
  setup() {
    const location = ref('here');
    provideLocation(location);

    return [];
  }
})

// child
defineComponent({
  setup() {
    const location = useLocation(); // typed as string
    // location.value contains 'here'

    return [];
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22