Use of provide and inject in Vue3

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!

You may also be interested in:
  • Sharing the implementation principle of Provide/Inject in Vue3
  • Usage and principles of provide and inject in Vue3
  • Sharing tips on using Vue3 provide and inject

<<:  Detailed explanation of Tomcat directory structure

>>:  MySQL 8.x msi version installation tutorial with pictures and text

Recommend

Install JDK1.8 in Linux environment

Table of contents 1. Installation Environment 2. ...

Vue implements seamless scrolling of lists

This article example shares the specific code of ...

Table of CSS Bugs Caused by hasLayout

IE has had problems for a long time. When everyone...

Windows DNS server exposed "worm-level" vulnerability, has existed for 17 years

Vulnerability Introduction The SigRed vulnerabili...

Adobe Brackets simple use graphic tutorial

Adobe Brackets is an open source, simple and powe...

Detailed tutorial on docker-compose deployment and configuration of Jenkins

Docker-compose deployment configuration jenkins 1...

Detailed explanation of this pointing problem in JavaScript

Preface Believe me, as long as you remember the 7...

Negative margin function introduction and usage summary

As early as in the CSS2 recommendations in 1998, t...

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

JavaScript style object and CurrentStyle object case study

1. Style object The style object represents a sin...

Detailed explanation of how to use eslint in vue

Table of contents 1. Description 2. Download rela...

Docker image creation Dockerfile and commit operations

Build the image There are two main ways to build ...