vue3中provide和inject的使用
1.provide 和 inject 的講解
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù)。
這兩個(gè)函數(shù)都是在setup函數(shù)中使用的。
父級(jí)組件使用provide向下進(jìn)行傳遞數(shù)據(jù);
子級(jí)組件使用inject來獲取上級(jí)組件傳遞過來的數(shù)據(jù);
需要注意的是:
1==>provide只能夠向下進(jìn)行傳遞數(shù)據(jù)
2==>在使用provide和inject的時(shí)候需從vue中引入
2.provide 和 inject 的使用
我們將創(chuàng)建2個(gè)組件
兒子組件ErZi.vue
孫子組件SunZI.vue
我們將在父級(jí)組件中向其子代傳遞數(shù)據(jù);
那么兒子、孫子組件都將會(huì)接受到;
并且在視圖上顯示出來
3.父組件
<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' }) // 第一個(gè)參數(shù)是是共享數(shù)據(jù)的名稱(giveSunzi) // 第二個(gè)參數(shù)是共享的數(shù)據(jù)(giveSunziData) provide('giveSunzi',giveSunziData) } } </script>
父組件向其子代組件傳遞了一個(gè)對(duì)象
provide是在setUp這個(gè)組合APi中使用的
provide的使用方式:
provide('共享數(shù)據(jù)名稱',共享值)
共享值可以是字符串、數(shù)字、對(duì)象、數(shù)組子組件在進(jìn)行接收到的時(shí)候;
let xxx=inject('共享數(shù)據(jù)名稱');
4.兒子組件
<template> <div> <h2>兒子組件</h2> <div>得到的值:{{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.孫子組件
<template> <div> <h2>孫子組件</h2> <div>得到的值{{getYeYeData}}</div> </div> </template> <script lang="ts"> import { defineComponent,inject } from 'vue'; export default defineComponent({ setup(){ let getYeYeData=inject('giveSunzi'); return { getYeYeData } } }); </script>
6.效果圖
7.父組件可以傳遞多個(gè)rovide嗎?
有些時(shí)候,我們的父組件可能需要傳遞多個(gè)rovide;
因?yàn)槲覀兿胱寯?shù)據(jù)分開。
此時(shí)就需要傳遞多個(gè)rovide。
經(jīng)過實(shí)踐,父組件是可以傳遞多個(gè)rovide的?。。?!
這是沒有沒問題的;但是個(gè)人并不推薦這樣處理
我們可以在傳遞的時(shí)候?qū)⒍鄠€(gè)數(shù)據(jù)進(jìn)行一次組裝;
組裝好了之后再進(jìn)行傳遞
8.rovide和inject的引用場(chǎng)景
當(dāng)父組件有很多數(shù)據(jù)需要分發(fā)給其子代組件的時(shí)候,
就可以使用provide和inject。
到此這篇關(guān)于vue3中provide和inject的使用的文章就介紹到這了,更多相關(guān)vue provide和inject使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue3中使用BabylonJs開發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗(yàn),在本文中,向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格,需要的朋友可以參考下2022-07-07vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法,"missing script: serve"是一個(gè)錯(cuò)誤信息,意味著在執(zhí)行啟動(dòng)腳本時(shí),找不到名為"serve"的腳本,需要的朋友可以參考下2023-11-11基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,項(xiàng)目中主要用了Flex布局,以及viewport相關(guān)知識(shí),已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下2018-02-02