Summary of usage of provide and inject in vue3

Preface:

When passing data from parent and child components, props and emit are usually used. When passing through child, props are used. If the parent component passes through grandchild components, 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 needs to be passed many times, which will be very troublesome.

In this case, you can use provide and inject to solve this problem. No matter how deep the component is nested, the parent component can provide data for all child or grandchild components. The parent component uses provide data, and the child or grandchild component inject data. At the same time, it is more convenient to pass values ​​between brother components.

1. Vue2's provide / inject

Use provide: is an object with properties and values. like:

provide:{
 info:"value"
}

If the data in data is required to be used in provide, an error will be reported in this way. When accessing the component instance property, you need to convert provide to a function that returns the object.

provide(){
 return{
  info: 
 }
}

inject: is an array of strings. like:

inject: [ 'info' ]

Receive the info data provided above, or it can be an object that contains from and default properties. From is the key used for searching in the injected content that can be used for injecting content, and the default property is the specified default value.

In vue2 project/inject application:

// Parent component

export default{
 provide:{
  info:"Providing data"
 }
}

//Subcomponent

export default{
 inject:['info'],
 mounted(){
     ("Receive data:", ) // Receive data: provide data }
}

provide / inject Similar to subscription and publishing of messages. provide or send data, inject receive data.

2. Vue3's provide / inject usage

Use provide/inject in a combined API, both of which can only be called during setup, and the provide/inject method must be imported from the vue display before use.

The provide function receives two parameters:

provide( name,value )

name: defines the name that provides property.
value: the value of property.
When using:

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

The inject function has two parameters:

inject(name,default)

name: Receive the attribute name provided by the provide.
default: Set the default value, can be not written, it is an optional parameter.
When using:

import { inject } from "vue"
export default {
  setup(){
    inject('info',"Set default values")
  }
}

Full Example 1: Provide/inject instance
// Parent component code

<script>
import { provide } from "vue"
export default {
  setup(){
    provide('info',"value")
  }
}
</script>

//Subcomponent Code

<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
  setup(){
    const info = inject('info')
    return{
      info
    }
  }
}
</script>

3. Add responsiveness

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

Complete Example 2: Provide/inject responsiveness

// Parent component code<template>
  <div>
    info：{{info}}
    <InjectCom ></InjectCom>
  </div>
</template>
<script>
import InjectCom from "./InjectCom"
import { provide,readonly,ref } from "vue"
export default {
  setup(){
    let info = ref("Did you study today?")
    setTimeout(()=>{
       = "Don't make excuses, learn immediately"
    },2000)
    provide('info',info)
    return{
      info
    }
  },
  components:{
    InjectCom
  }
}
</script>

// InjectCom subcomponent code<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
  setup(){
    const info = inject('info')
    setTimeout(()=>{
       = "renew"
    },2000)
    return{
      info
    }
  }
}
</script>

In the above example, both the parent component or the child component will modify the value of info.

provide / inject is similar to the subscription and publishing of messages, following the single data flow in vue. What does it mean? It means where the data is, and where it can only be modified, and the data cannot be modified at the data transmission, which can easily lead to unpredictable state.

When modifying the value in the subscription component, it can be modified normally. If other components also use the value, the status may easily cause confusion, so the problem needs to be avoided at the source.

This is the end of this article about the usage of provide and inject in vue3. For more related content on usage of vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!