Hi Dai Gei Ho~ 我是 Winnie ～

在今天文章中，我們要來說說 Vue3 Composition API中 的 provide & inject。

什麼是 provide & inject？

provide/inject 是 Vue 在 2.2.0 版本新增的 API，主要的功用就是讓跨組件的資料傳遞更為方便。

什麼意思?讓我們用較生活化的例子來比喻：

這是一個無聊的日常小故事：

從前從前..有一位 曾祖父 想要傳話給 小明，卻因為沒有手機可以使用，只好將話傳給 自己的兒子(小明爺爺)，小明的爺爺 再透過自己兒子(小明爸爸)來傳話 給小明 ，結果 傳著傳著 曾祖父 就老了 ..

假如 今天曾祖父 與 爺爺 都有一部手機 是不是就可以很方便的傳話給小明了.. 也就不會老了

所以在回到正題之中，從以上祖孫失聯中的傳話方式 就好比 我們在Vue之中使用傳統props來做跨階層元件之間的狀態溝通，透過一層一層元件來傳遞資料，而這樣不僅會很麻煩，同時也會增加元件之間的耦合度。

所以此時 provide & inject 就是 那部手機，讓我們可以方便達到跨階層元件之間的狀態溝通。

那要如何使用呢？ 嗯 其實用法很簡單，讓我們先來看看官方的概念圖:

從上圖我們可以看到，我們需在提供資料狀態的上層元件 加上 provide，再透過 Inject 的 讓底層元件來取用。

範例如下:

// grandpa.vue
<script>
import { ref, provide } from 'vue';

export default ({
  setup() {
  
    //傳遞資料也可以是任何形式，如ref物件 、字串等
    provide('figure', "爺爺"); 
    provide('message', "小明 你吃飽了嗎"); 
    
  }
});
</script>

在提供狀態的 上層元件中，我們可以透過provide()函式來傳遞，而其主要接受兩個參數，來定義要傳遞的資料名稱 與值。

// grandson.vue
<script>
import { inject } from 'vue';

export default ({
  setup() {
  
  //透過 定義的名稱名稱來取值
   const messenger= inject('figure') 
   const content = inject('message') 
   
   return {
       messenger,
   }   content 
  }
});
</script>

接著，在需要取值的子元件中，我們可以使用剛才所定義的名稱 ，透過inject()來取值。

注意：如果 元件被銷毀時，provide與inject 得連結就會失效，因為兩者都只能在現存元件中使用。

以上就是關於 Provide & Inject基礎用法的講解，如有問題歡迎大家多多指教，謝謝。