First, why do we use provide/inject? For communication between grandparent and grandchild components, or even between grandparent and grandchild components, we can use VUex.

That’s true, but, listen to me. But, sometimes your project is small and even the component communication scenario is very small. Isn’t it a waste of time to introduce Vuex just for a few communication parameters? Use parent to fetch data/methods. If you want to use parent to fetch data/methods, use parent to fetch data/methods. Write a function that fetches data/methods from the parent component instance. Write a function that fetches data/methods from the parent component instance. Write a function to encapsulate parent again. Isn’t that troublesome? Ready-made you don’t have to curve to save the country. Ha ha ~ digress.

Provide /inject is to solve these problems. Let’s see how it works. The backhand is a few simple lines of code:

1. The parent component provides parameters to be passed to the child component provide() {return {listType: this.listType,}} 2. Subcomponents use: inject: ['listType'],Copy the code

Of course, you can also specify your default values and the source of your parameters in inject:

Inject :{listType:{from:"par"//provide the name of the definition default:1}}Copy the code

All right! Isn’t that easy? The idea is that both parent and ancestor components can inject dependencies into descendant components, no matter how deep the component level.

A few more:

Provide can be an object or a function that returns an object.

Inejct: Can be an array of strings or an object.

If you are interested, take a look at the following source section, which is also quite easy to understand:

Provide core source code:

export function provide<T>(key: InjectionKey<T> | string | number, value: T) { if (! currentInstance) { if (__DEV__) { warn(`provide() can only be used inside setup().`) } } else { The default instance inherits the parent's provides object. Let provides = currentInstance. Provides // Creates its own provide object const using the parent provide object as a prototype parentProvides = currentInstance.parent && currentInstance.parent.provides if (parentProvides === provides) { provides =  currentInstance.provides = Object.create(parentProvides) } provides[key as string] = value } }Copy the code

Core source code of Inject:

export function inject( key: InjectionKey<any> | string, defaultValue? : unknown, TreatDefaultAsFactory = false) {/ / get the current component instance const instance = currentInstance | | currentRenderingInstance if (instance) {// get provides const provides = instance.parent == null? instance.vnode.appContext && instance.vnode.appContext.provides : The instance. The parent. Provides the if (provides && (key as string | symbol) in provides) {/ / if the key is returned directly return provides [key as String]} else if (arguments.length > 1) { Return treatDefaultAsFactory && isFunction(defaultValue)? defaultValue.call(instance.proxy) : ${String(key)}" not found. ')}} else if (__DEV__) { warn(`inject() can only be used inside setup() or functional components.`) } }Copy the code

All right! That’s about it! Have a question comment below: I see will reply in time oh!