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. Installation Environment 2. ...
This article example shares the specific code of ...
IE has had problems for a long time. When everyone...
Vulnerability Introduction The SigRed vulnerabili...
Adobe Brackets is an open source, simple and powe...
When making a website, I found that video files, s...
Docker-compose deployment configuration jenkins 1...
Preface Generator functions have been in JavaScri...
When playing music, the lyrics will gradually fil...
Preface Believe me, as long as you remember the 7...
As early as in the CSS2 recommendations in 1998, t...
<iframe src="./ads_top_tian.html" all...
1. Style object The style object represents a sin...
Table of contents 1. Description 2. Download rela...
Build the image There are two main ways to build ...