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

留言