vue3中provide和inject的使用
阿新 • • 發佈:2021-06-30
1.provide 和 inject 的講解
provide和inject可以實現巢狀元件之間進行傳遞資料。
這兩個函式都是在setup函式中使用的。
父級元件使用provide向下進行傳遞資料;
子級元件使用inject來獲取上級元件傳遞過來的資料;
需要注意的是:
1==>provide只能夠向下進行傳遞資料
2==>在使用provide和inject的時候需從vue中引入
2.provide 和 inject 的使用
我們將建立2個元件 兒子元件ErZi.vue 孫子元件SunZI.vue 我們將在父級元件中向其子代傳遞資料; 那麼兒子、孫子元件都將會接受到; 並且在檢視上顯示出來
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' }) // 第一個引數是是共享資料的名稱(giveSunzi) // 第二個引數是共享的資料(giveSunziData) provide('giveSunzi',giveSunziData) } } </script>
父元件向其子代元件傳遞了一個物件
provide是在setUp這個組合APi中使用的
provide的使用方式:
provide('共享資料名稱',共享值)
共享值可以是字串、數字、物件、陣列
子元件在進行接收到的時候;
let xxx=inject('共享資料名稱');
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.父元件可以傳遞多個rovide嗎?
有些時候,我們的父元件可能需要傳遞多個rovide;
因為我們想讓資料分開。
此時就需要傳遞多個rovide。
經過實踐,父元件是可以傳遞多個rovide的!!!!
這是沒有沒問題的;
但是個人並不推薦這樣處理
我們可以在傳遞的時候將多個數據進行一次組裝;
組裝好了之後再進行傳遞
8.rovide和inject的引用場景
當父元件有很多資料需要分發給其子代元件的時候,
就可以使用provide和inject。