在Vue3中使用Provide / Inject

前面已經講了淺談Vue2中provide和inject使用,今天講講在Vue3中如何使用provide和injectvue

Vue3的寫法已經和Vue2有所不一樣,所以須要熟悉Vue3的寫法,其實變更不大,如今官方文檔也有詳細介紹,有興趣的能夠去了解.ide

1 使用 Provide函數

在 setup() 中使用 provide 時,咱們首先從 vue 顯式導入 provide 方法。這使咱們可以調用 provide 時來定義每一個 property。code

provide 函數容許你經過兩個參數定義 property:對象

  1. property 的 name (<String> 類型)文檔

  2. property 的 value

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的能夠直接上手。
相關文章
相關標籤/搜索