vue3中provide和inject的使用

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。