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

In this article, the editor introduces in detail "how to use Vue3's provide/inject". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use Vue3's provide/inject" can help you solve your doubts.

Combined supply and injection

We can also use provide/inject in combinatorial API. Both can only be called during setup () of the current active instance.

Imagine the scene

Suppose we want to rewrite the following code, which contains a TemplateM component that uses a combined API to provide the location of users for the MyMarker component.

Import MyMarker from'.. / components/MyMarker'

Export default {

Components: {

MyMarker

}

Provide: {

Location: 'North Pole'

Geolocation: {

Longitude: 90

Latitude: 135

}

}

}

The code for MyMaker.vue is as follows:

{{location}}-{{geolocation}}

Export default {

Inject: ['location',' geolocation']

}

We can see the effect as follows:

We use the optional provision and injection above, and then we will use the combined API to modify the above code.

Combined provide

When using provide in setup (), we first explicitly import the provide method from vue. This enables us to define each property when we call provide.

The provide function allows you to define property with two parameters:

Name of property (type)

Value of property

Using the TemplateM component, the values we provide can be refactored as follows:

Import MyMarker from'.. / components/MyMarker'

Import {provide} from 'vue'

Export default {

Components: {

MyMarker

}

Setup () {

Provide ('location',' North Pole')

Provide ('geolocation', {

Longitude: 90

Latitude: 135

})

}

}

We found that the provide object is transformed into the form of provide (key, value) function.

Combined inject

When using inject in setup (), you also need to import it explicitly from vue. Once we have done this, we can call it to define how to expose it to our components.

The inject function takes two parameters:

Name of the property to be injected

A default value (optional)

Using the MyMarker component, you can ReFactor it with the following code:

{{location}}-{{geolocation}}

Import {inject} from 'vue'

Export default {

Name: 'MyMarker'

Setup () {

Const location = inject ('location')

Const geolocation = inject ('geolocation')

Return {

Location

Geolocation

}

}

}

Let's take a look at the effect again as follows:

Responsive type

Add responsiveness

To increase the responsiveness between the supplied value and the injected value, we can use ref or reactive when providing the value.

Using the TemplateM component, our code can be updated as follows:

Import MyMarker from'.. / components/MyMarker'

Import {provide, ref, reactive} from 'vue'

Export default {

Components: {

MyMarker

}

Setup () {

Const location = ref ('North Pole')

Const geolocation = reactive ({

Longitude: 90

Latitude: 135

})

Provide ('location', location)

Provide ('geolocation', geolocation)

}

}

Now, if there are any changes in these two property, the MyMarker component will also be updated automatically!

Modify responsive property

When using responsive supply / injection values, it is recommended that you keep any changes to the responsive property within the * provider * as much as possible.

For example, in cases where the location of the user needs to be changed, it is best to do so in the TemplateM component.

Import MyMarker from'.. / components/MyMarker'

Import {provide, ref, reactive} from 'vue'

Export default {

Components: {

MyMarker

}

Setup () {

Const location = ref ('North Pole')

Const geolocation = reactive ({

Longitude: 90

Latitude: 135

})

Provide ('location', location)

Provide ('geolocation', geolocation)

Return {

Location

}

}

Methods: {

UpdateLocation () {

This.location = ""

}

}

}

However, sometimes we need to update the injected data inside the component that injected the data. In this case, we suggest that you provide a way to change the responsive property.

Import MyMarker from'.. / components/MyMarker'

Import {provide, ref, reactive} from 'vue'

Export default {

Components: {

MyMarker

}

Setup () {

Const location = ref ('North Pole')

Const geolocation = reactive ({

Longitude: 90

Latitude: 135

})

Const updateLocation = () = > {

Location.value = ""

}

Provide ('location', location)

Provide ('geolocation', geolocation)

Provide ('updateLocation', updateLocation)

}

}

{{location}}-{{geolocation}}

Import {inject} from 'vue'

Export default {

Name: 'MyMarker'

Setup () {

Const location = inject ('location')

Const geolocation = inject ('geolocation')

Const updateLocation = inject ('updateLocation')

Return {

Location

Geolocation

UpdateLocation

}

}

}

Finally, if you want to ensure that the data passed through provide is not changed by the injected component, we recommend using readonly for the provider's property.

Import MyMarker from'.. / components/MyMarker'

Import {provide, ref, reactive, readonly} from 'vue'

Export default {

Components: {

MyMarker

}

Setup () {

Const location = ref ('North Pole')

Const geolocation = reactive ({

Longitude: 90

Latitude: 135

})

Const updateLocation = () = > {

Location.value = ""

}

Provide ('location', readonly (location))

Provide ('geolocation', readonly (geolocation))

Provide ('updateLocation', updateLocation)

}

}

After reading this, the article "how to use Vue3's provide/inject" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.