前面已經講了淺談Vue2中provide和inject使用,今天講講在Vue3中如何使用provide和injectvue
Vue3的寫法已經和Vue2有所不一樣,所以須要熟悉Vue3的寫法,其實變更不大,如今官方文檔也有詳細介紹,有興趣的能夠去了解.ide
1 使用 Provide函數
在 setup() 中使用 provide 時,咱們首先從 vue 顯式導入 provide 方法。這使咱們可以調用 provide 時來定義每一個 property。code
provide 函數容許你經過兩個參數定義 property:對象
property 的 name (<String> 類型)文檔
import { provide } from "vue";
export default {
setup() {
provide("data", "給子孫的數據");
}
};it
上面這種方式傳遞String類型,還能夠傳遞對象類型
import { provide } from "vue";
export default {
setup() {
provide("data", {
data1: "給子孫的數據1",
data2: "給子孫的數據2"
});
}
};class
**2 使用 inject** 在 setup() 中使用 inject 時,還須要從 vue 顯式導入它。一旦咱們這樣作了,咱們就能夠調用它來定義如何將它暴露給咱們的組件。 inject 函數有兩個參數: 1. 要注入的 property 的名稱 1. 一個默認的值 (可選)
import { inject } from "vue"; export default { setup() { const data = inject("data"); return { data }; } };
設置默認值
import { inject } from "vue";
export default {
setup() {
const data = inject("data", "我是默認值");
return {
data
};
}
};import
**3 總結** 基本用法和Vue區別不大,熟悉Vue2的能夠直接上手。