For those of you who have done a project with Vuejs, we all know one way to pass data from the parent component to the child component is to use prop (this prop is on React side, too). However, in cases where the child components are nested many classes, you must pass the prop to each intermediate component so that it can reach the component you want. This is really bad because as long as we forget to define prop in a certain component, we will receive an error message of type xxx is not defined . And at this point, we can only sit back and check to see where we missed the “prop” on our long journey. However, you don’t need to be sad for too long if we know what I’m going to bring in today’s post. It is to provide/inject . In fact, I am also enlightened after being handled by my brother for the page-turning feature when all the subforms (each form is a component) in it are validated.
Looking for Vue doc, you can see in v2’s doc, it is only mentioned in the API section, while in v3 (currently beta at the time of writing), it has been split into a separate section. Let’s find out more details about it. 
How to use provide / inject?
The parent component acts as the dependency provider for all of its own child components. It is influenced by the hierarchical structure of the components. It is divided into two parts:
provide: definition in the parent component, where the data is supplied.inject: definition in the child component, using the data provided from the parent component.
provide should be an object or a function returns an object. This object contains available properties to inject into child components. You can use ES2015 as a key in this object, but only for environments that support Symbol and Reflect.ownKeys .
1 2 3 4 5 6 7 8 | <span class="token comment">// parent component providing 'foo'</span> <span class="token keyword">var</span> Provider <span class="token operator">=</span> <span class="token punctuation">{</span> provide <span class="token operator">:</span> <span class="token punctuation">{</span> foo <span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span> |
inject should be:
- An array of strings
- An object where the key is the name of local binding, the value is the key that can be searched in the specified injections.
1 2 3 4 5 6 7 8 9 | <span class="token comment">// child component injecting 'foo'</span> <span class="token keyword">var</span> Child <span class="token operator">=</span> <span class="token punctuation">{</span> inject <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'foo'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token function">created</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> foo <span class="token punctuation">)</span> <span class="token comment">// => "bar"</span> <span class="token punctuation">}</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span> |
The use of provide/inject allows us to continue developing the component more safely without changing the dependencies of the child components. The interfaces between components are still explicitly defined the same way we would use prop.
With reactive
According to the detailed description of provide and inject , this feature is not reactive. We can change it by using ref or reactive for objects in provide . For more details, we can see the example from Vue doc here . This example is simply calculating the length of an array. By using more reactive, when you change the list of items, it will automatically recalculate the number of elements. You can follow the doc and see the results yourself .
In addition, I also try to search, there is a detailed article about reactive uses with provide/inject here . The article details some of the ways you can use it.
When to use provide / inject
As in Vue’s doc says, let’s try not to provide/inject but use prop and event. This will make you avoid unnecessary complexity and your code will be easier to understand. However, there will be some cases where you can use provide/inject appropriately.
- Having to pass prop from one class to another, across multiple components, and those in between, uses nothing of the prop you pass to it.
- For a set of components that are always used together,
provide/injectcan be used. The best thing to do though is to use prop and event for other components to use. - In the case of using Vuex with simple states it is really unnecessary. With a reusable component group, using Vuex also brings unnecessary complexity.
- If the passed down data is used by several components, then using
provide/injectmay make sense. However, with data used elsewhere, leaving it in a higher component or Vuex is a better solution.
Note: We should not use provide/inject but as a two-way data binding by changing the value from both component providing and component injecting. Because of:
- Vue uses a one-way data binding system. Using a different data flow model causes inconsistencies and confusion.
- Keeping all changes in a single component makes it easier to update, refactor, and track errors in the future.
Conclude
By using provide/inject you can feed data to subcomponents that are far away and that makes us able to do a great job. However, as Vue’s doc says, we should not use it when it’s not really necessary. This article is the end. Thank you everyone for watching. If something goes wrong, everyone please sympathize.
Refer
https://vuejs.org/v2/api/#provide-inject
https://v3.vuejs.org/guide/component-provide-inject.html
https://blog.logrocket.com/how-to-make-provide-inject-reactive/