Use of provide and inject in Vue3

1. Explanation of provide and inject

Provide and inject can transfer data between nested components.
Both functions are used in the setup function.
The parent component uses provide to pass data downward;
The child component uses inject to obtain the data passed by the parent component;
It should be noted that:
1==>provide can only pass data downward
2==>When using provide and inject, you need to import from vue

2. Use of provide and inject

We will create 2 components subcomponent ErZi.vue
Grandchild component SunZI.vue
We will pass data from the parent component to its children;
Then both son and grandson components will receive it;
And display it on the view

3. Parent Component

<template>
  <erzi-com></erzi-com>
</template>
<script lang="ts">
import ErZi from "../components/ErZi.vue"
import {provide, ref} from "vue"
export default {
  name:"About",
  components:{
    'erzi-com':ErZi
  },
  setup(){
    let giveSunziData=ref({
       with:100,
       height:50,
       bg:'pink'
    })
    // The first parameter is the name of the shared data (giveSunzi)
    // The second parameter is the shared data (giveSunziData)
    provide('giveSunzi',giveSunziData)
  }
}
</script>

The parent component passes an object to its child component
provide is used in the setUp combination API
How to use provide:
provide ('shared data name', shared value)
Shared values ​​can be strings, numbers, objects, arrays

When the subcomponent is receiving;
let xxx=inject('shared data name');

4. Son Component

<template>
    <div>
      <h2>Son Components</h2>
      <div>Get value: {{getFaytherData}}</div>
    </div>
    <hr/>
    <sun-con></sun-con>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
import SunZI from "./SunZI.vue"
export default defineComponent({
  name: 'ErZi',
   components:{
     'sun-con':SunZI
   },
    setup(){
      let getFaytherData = inject('giveSunzi');
      return { getFaytherData }
    }
});
</script>

5. Grandchild Component

<template>
    <div>
         <h2>Grandchild components</h2>
         <div>The value obtained is {{getYeYeData}}</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,inject } from 'vue';
export default defineComponent({
   setup(){
     let getYeYeData=inject('giveSunzi');
    return { getYeYeData }
   }
});
</script>

6. Rendering

7. Can a parent component pass multiple rovides?

Sometimes, our parent component may need to pass multiple rovides;
Because we want to keep the data separate.
At this time, you need to pass multiple rovides.
After practice, the parent component can pass multiple routers! ! ! !
There is no problem with this;

However, I personally do not recommend this approach. We can assemble multiple data at once when passing them;
After assembly, transfer

8. Reference scenarios of rovide and inject

When the parent component has a lot of data to distribute to its child components,
You can use provide and inject.

This is the end of this article about the use of provide and inject in vue3. For more relevant content on the use of vue provide and inject, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!