1. Explanation of provide and inject
2. Use of provide and inject
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>
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?
8. Reference scenarios of rovide 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:
|
<<: Detailed explanation of Tomcat directory structure
>>: MySQL 8.x msi version installation tutorial with pictures and text
Table of contents 1. Introduction: 2. The first i...
The task of concurrency control in a database man...
Table of contents 1. Overview 2. Digital Enumerat...
The first point to make is that people can judge t...
When Mysql occupies too much CPU, where should we...
Preface I recently made a fireworks animation, wh...
The default submission method of html is get inste...
Where is my hometown when I look northwest? How m...
Color is one of the most important elements for a...
Use JS to implement a random roll call system for...
Which historical version can the current transact...
This article shares the specific code of Vue+Webs...
Table of contents 1. The role of nginx process lo...
Table of contents question extend Solving the pro...
Maybe everyone knows that js execution will block...