Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the provide/inject of Vue". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the provide/inject of Vue".

Simply compare provide/inject to React's context, all set up to solve the inconvenience of transferring attributes across levels, like the early context, the provide/inject mechanism was not loaded into the official document at the beginning, but now it has been written, but it is still vague, which is the purpose of this article.

Hello World

Look at the simplest example of getting the incoming color values from the grandparent component.

The UI interface is as simple as above, and the grandparents component also provides a radio to change.

Red

Green

First look at provide, which can be an object, such as

Provide: {

Color: "green"

}

You can get this value smoothly in the grandchild component, but it should be noted that the responsive data of the Vue instance cannot be returned in this way, when you try to change to

Provide: {

Color: this.color, / / cannot access the Vue instance

}

An error occurred with the prompt Uncaught TypeError: Cannot read property 'color' of undefined.

Generally, a function is used to return an incoming object.

Provide () {

Return {

Color: this.color

}

}

But color is not responsive, which means that if I choose another color in the grandchild component, I won't get the updated value in the grandchild component, which is detailed in the next section.

Inject is used to specify an array or an object. For an array, put the name of the field in the provide, while the object can be specified.

Field name in the current instance

Corresponds to the field name in provide

Default values or functions that return default values

Const Child = {

Inject: {

Foo: {

From: 'bar'

Default: () = > [1,2,3]

}

}

}

Not responsive.

This is different from React's context. React does not have a responsive mechanism. Once the attribute is changed, layers of rendering will be triggered by default, and the developer will optimize it through shouldComponentUpdate.

It is clearly stated in the official documents

Provide and inject bindings are not responsive. It was done on purpose. However, if you pass in a listenable object, the property of the object is responsive.

The first solution is to convert the value to a function. Remember to use the arrow function, otherwise you can't get the this correctly.

Provide () {

Return {

Color: () = > {

Return this.color

}

}

}

Then when you use it, it becomes a function call.

The color passed down {{color ()}}

This brings an obvious disadvantage is that because it is not responsive, this function will be called multiple times, for example, there are two color () in the above template, you can hit a breakpoint in the function and you will find that it comes in twice.

A better solution is to pass down the Vue instance where provide is located and modify it.

Provide () {

Return {

Color: this

}

}

What you get in the Sun component is actually an instance, so take an extra layer of properties.

The color passed down {{color.color}}

You can see that many UI component libraries pass properties in this way, because it is possible to get the values in the parent component in the subcomponents at the uncertain level.

Thank you for your reading, the above is the content of "how to use Vue provide/inject", after the study of this article, I believe you have a deeper understanding of how to use Vue provide/inject, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.