1.provide 和 inject 的講解

provide和inject可以實現巢狀元件之間進行傳遞資料。
這兩個函式都是在setup函式中使用的。
父級元件使用provide向下進行傳遞資料；
子級元件使用inject來獲取上級元件傳遞過來的資料；
需要注意的是：
1==>provide只能夠向下進行傳遞資料
2==>在使用provide和inject的時候需從中引入

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'
    })
    // 第一個引數http://www.cppcns.com
 
是是共享資料的名稱(giveSunzi)
    // 第二個引數是共享的資料(giveSunziData)
    provide('giveSunzi',giveSunziData)
  }
}
</script>

父元件向其子代元件傳遞了一個物件
provide是在setUp這個組合APi中使用的
provide的使用方式：
provide（'共享資料名稱vPvrwnxM',共享值）
共享值可以是字串、數字、物件、陣列

子元件在進行接收到的時候；
let xxx=inject('共享資料名稱');

4.兒子元件

<template>
    <div>
      <h2>兒子元件</h2>
      <div>得到的值：{{getFaytherData}}</div>
    </d
 
iv>
    <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。

到此這篇關於vue3中provide和inject的使用的文章就介紹到這了,更多相關vue provide和inject使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！