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

How to optimize the slow Like fuzzy query in MySQL

Table of contents 1. Introduction: 2. The first i...

Examples of optimistic locking and pessimistic locking in MySQL

The task of concurrency control in a database man...

TypeScript Enumeration Type

Table of contents 1. Overview 2. Digital Enumerat...

Introduction to Semantic XHTML Tags

The first point to make is that people can judge t...

Optimization methods when Mysql occupies too high CPU (must read)

When Mysql occupies too much CPU, where should we...

Understanding the CSS transform-origin property

Preface I recently made a fireworks animation, wh...

How to modify the default submission method of the form

The default submission method of html is get inste...

Detailed explanation of query examples within subqueries in MySql

Where is my hometown when I look northwest? How m...

Color matching techniques and effect display for beauty and styling websites

Color is one of the most important elements for a...

JS implements random roll call system

Use JS to implement a random roll call system for...

Instructions for using MySQL isolation Read View

Which historical version can the current transact...

Vue+Websocket simply implements the chat function

This article shares the specific code of Vue+Webs...

Detailed explanation of the implementation of nginx process lock

Table of contents 1. The role of nginx process lo...

echars 3D map solution for custom colors of regions

Table of contents question extend Solving the pro...

Will css loading cause blocking?

Maybe everyone knows that js execution will block...