Day_21 : 让 Vite 来开启你的Vue 之跨元件资料传递 Provide & Inject

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()来取值。