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

This article mainly explains "how to use provide and inject in vue3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use provide and inject in vue3.

Foreword:

When transferring data from parent to child components, props and emit are usually used, and props is used when the father passes on the child. If the parent component inherits the grandchild component, it needs to be passed to the child component first, and then to the grandchild component. If multiple child components or multiple grandchild components are used, it will be troublesome to pass it on many times.

In cases like this, you can use provide and inject to solve this problem, where the parent component can provide data for all child or grandchild components, no matter how deep the nesting of the component, the parent component uses provide to provide data, and the child component or grandchild component inject injects data. At the same time, it is more convenient to transfer values between sibling components.

First, the use of provide / inject of Vue2

Provide: is an object with properties and values in it. Such as:

Provide: {info: "value"}

If provide needs to use data in data, an error will be reported in this way. When you access the component instance property, you need to convert the provide into a function that returns the object.

Provide () {return {info: this.msg}}

Inject: is an array of strings. Such as:

Inject: ['info']

Receive the info data provided by the provide above, or it can be an object that contains from and default properties, and from is the key,default property that can be used to search for injection content with the specified default value.

Project / inject application in vue2:

/ / parent component export default {provide: {info: "provide data"} / / subcomponent export default {inject: ['info'], mounted () {console.log ("receive data:", this.info) / / receive data: provide data}}

Provide / inject is similar to subscribing and publishing messages. Provide provides or sends data, and inject receives data.

Second, the use of provide / inject of Vue3

Using provide/inject in a combined API, both can only be called during setup, and you must import the provide/inject method from the vue display before using it.

The provide function takes two parameters:

Provide (name,value)

Name: defines the name that provides property.

Value: the value of property.

When in use:

Import {provide} from "vue" export default {setup () {provide ('info', "value")}}

The inject function takes two parameters:

Inject (name,default)

Name: receives the property name provided by provide.

Default: set the default value, can not be written, is an optional parameter.

When in use:

Import {inject} from "vue" export default {setup () {inject ('info', "set default")}}

Full instance 1:provide/inject instance

/ / parent component code import {provide} from "vue" export default {setup () {provide ('info', "value)}} / / subcomponent code {{info}} import {inject} from" vue "export default {setup () {const info = inject (' info') return {info}} 3. Add responsiveness

To add responsiveness to provide/inject, use ref or reactive.

Complete instance 2:provide/inject response

/ / parent component code info: {{info}} import InjectCom from ". / InjectCom" import {provide,readonly,ref} from "vue" export default {setup () {let info = ref ("did you learn today?") SetTimeout () = > {info.value = "No excuses Learn immediately "}, 2000) provide ('info',info) return {info}}, components: {InjectCom}} / / InjectCom subcomponent code {{info}} import {inject} from" vue "export default {setup () {const info = inject (' info') setTimeout () = > {info.value =" Update "}, 2000) return {info}

In the above example, the value of info is modified in either the parent component or the child component.

Provide / inject is similar to subscribing and publishing messages. What does it mean to follow a single data flow in vue? That is, where the data is, where the modification can only be, and the data cannot be modified at the data transfer place, which is easy to cause the state to be unpredictable.

When you modify a value within a subscription component, it can be modified normally. If other components also use this value, the state is easy to cause confusion, so you need to avoid the problem at the source.

Readonly read-only function, which needs to be introduced before use. If you add a readonly attribute to a variable, the data can only be read and cannot be changed. A warning will be issued when it is modified, but the value will not be changed.

How to use it:

Import {readonly} from "vue" let info= readonly ('read-only info value') setTimout (() = > {info= "update info" / / update the value of info in two seconds}, 2000)

After two seconds of running, the browser warns that the info value cannot be modified.

So we add a read-only attribute to the data emitted by provide to prevent the transmitted data from being modified.

Add readonly at the provide of full instance 2.

Provide ('info', readonly (info))

There is a read-only reminder when the subcomponent modifies the value.

When you modify the value, you still need to modify the data in the component where the provide publishes the data, so you will add the modification method in the component and publish it at the same time, just call it in the sub-component.

Such as:

/ / publish let info = ref ("have you studied today?") Const changeInfo = (val) = > {info.value = val} provide ('info',readonly (info)) provide (' changeInfo',changeInfo) / / subscribe const chang = inject ('changeInfo') chang (' rush to the front engineer')

Complete example 3: modify data

/ / parent component code info: {{info}} import InjectCom from ". / InjectCom" import {provide,readonly,ref} from "vue" export default {setup () {let info = ref ("did you learn today?") Const changeInfo = (val) = > {info.value = val} provide ('info',readonly (info)) provide (' changeInfo',changeInfo) return {info}, components: {InjectCom}} / / InjectCom subcomponent code update value import {inject} from "vue" export default {setup () {const info = inject ('info') const chang = inject (' changeInfo') return {info Chang} so far I believe you have a deeper understanding of "how to use provide and inject in vue3", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.