Detailed explanation on the use of Vue multi-level component provide/inject

This time I will bring you a detailed explanation of the use of Vue multi-level component provide/inject. What are the precautions when using Vue multi-level component provide/inject? Here are practical cases, let’s take a look.

provide / inject is a new method in 2.2 , which can inject dependencies (one content) from an ancestor component to all descendants.

provider/inject: To put it simply, variables are provided through provider in the parent component, and then the variables are injected through inject in the child component.

Vue official warning:

provide and inject mainly provide use cases for high-level plug-ins/component libraries. Not recommended for use directly in application code.

Of course, a warning is just a warning, you can use it normally.

The usage method is very similar to the combined gift package of data and props:

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

The only difference is that you don’t have to pass it in layer by layer. The event-bus used in the past can solve the problem of deep layers. problem, but it will cause the entire event-emit composition to be too confusing and difficult to maintain. Using provide / inject can ensure the clarity of parent-child unidirectional data flow.

The Provider/Consumer of Context in React also has the same effect. Since I haven’t used it in detail yet, I only have a limited understanding of React itself. I’ll leave it to you to learn more about it later. Interested students You can read the documentation to find out.

Reference article:

Vue official document
Provide/Inject in Vue 2.2

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

Detailed explanation of the steps for Vue to use vee-validate to verify the form

The above is the detailed content of Detailed explanation on the use of Vue multi-level component provide/inject. For more information, please follow other related articles on the PHP Chinese website!