Vue3 component 單檔案元件(SFC) 向跨元件遞資料(provide, inject)

在 Vue3 component 單檔案元件(SFC)示範(使用元件、傳入參數) 這篇中有示範使用 props 將資料從父層傳遞到子元件，但是如果 App.vue 裡面有 Components1.vue 子元件，再裡面還有 Components2.vue 子元件，這樣 App.vue 要傳遞資料給 Components2.vue 不就要先傳給 Components1.vue 再傳給 Components2.vue?

其實可以在父層透過 provide 公開傳遞資料，然後在任意子層使用 inject 接收。

在父層透過 provide 公開傳遞資料:

    
import {provide, reactive} from 'vue'

const userProfile = reactive({
  userName: 'Ruyut',
});

provide('userProfile', userProfile)
    

在任意子層使用 inject 接收

    
import {inject} from "vue";

const userProfile = inject("userProfile"); // inject 可以增加第二個參數，用來表示預設值
console.log(userProfile.name);
    

傳遞的可以是 ref, reactive 或任意資料，但是很可能出現子元件接收資料時父元件還未傳送，導致好像沒有接到資料，所以建議使用 ref 或 reactive

參考資料：
vuejs.org - Composition API: Dependency Injection