選項: 組合

provide

提供可以被後代元件注入的值。

型別

interface ComponentOptions {
  provide?: object | ((this: ComponentPublicInstance) => object)
}

詳情
provide 和 inject 一起使用，允許父元件作為所有後代元件的依賴注入器，無論元件層級有多深，只要它們在同一個父鏈中。
provide選項應該是一個物件或一個返回物件的函式。這個物件包含可注入其子元件的屬性。您可以使用Symbol作為物件的鍵。

示例

基本用法

JavaScript

const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}

使用函式提供每個元件的狀態

JavaScript

export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}

注意，在上面的示例中，提供的msg將不會是響應式的。有關更多詳細資訊，請參閱與響應式一起工作。

另請參閱 提供/注入

注入

透過從祖先提供者定位宣告要注入當前元件的屬性。

型別

interface ComponentOptions {
  inject?: ArrayInjectOptions | ObjectInjectOptions
}

type ArrayInjectOptions = string[]

type ObjectInjectOptions = {
  [key: string | symbol]:
    | string
    | symbol
    | { from?: string | symbol; default?: any }
}

詳情
inject選項可以是：
- 一個字串陣列，或者
- 一個物件，其中鍵是本地繫結名稱，值可以是：
  - 在可用注入中搜索的鍵（字串或Symbol），或者
  - 一個物件，其中
    - from屬性是在可用注入中搜索的鍵（字串或Symbol），
    - default屬性用作後備值。與props預設值類似，對於物件型別需要工廠函式以避免多個元件例項之間的值共享。
如果未提供匹配的屬性或預設值，則注入屬性將為undefined。
請注意，注入繫結不是響應式的。這是故意的。但是，如果注入的值是響應式物件，該物件上的屬性仍然保持響應式。有關更多詳細資訊，請參閱與響應式一起工作。

示例

基本用法

JavaScript

export default {
  inject: ['foo'],
  created() {
    console.log(this.foo)
  }
}

將注入值用作prop的預設值

JavaScript

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default() {
        return this.foo
      }
    }
  }
}

將注入值用作資料條目

JavaScript

const Child = {
  inject: ['foo'],
  data() {
    return {
      bar: this.foo
    }
  }
}

注入可以具有預設值的可選

JavaScript

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

如果需要從一個具有不同名稱的屬性中注入，請使用from來表示源屬性

JavaScript

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

與非原始值類似，您需要為非原始值使用工廠函式

JavaScript

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

另請參閱 提供/注入

混入

要混合到當前元件中的選項物件陣列。

型別

interface ComponentOptions {
  mixins?: ComponentOptions[]
}

詳情
mixins選項接受一個混合物件陣列。這些混合物件可以包含例項選項，就像正常的例項物件一樣，它們將使用某些選項合併邏輯與最終選項合併。例如，如果您的混合包含一個created鉤子，而元件本身也有一個，那麼這兩個函式都會被呼叫。
混合鉤子按提供的順序呼叫，並在元件自己的鉤子之前呼叫。
不再推薦
在Vue 2中，混入是建立可重用元件邏輯塊的主要機制。雖然Vue 3中仍然支援混入，但現在首選的方法是使用組合式API的可組合函式來在元件之間重用程式碼。

示例

JavaScript

const mixin = {
  created() {
    console.log(1)
  }
}

createApp({
  created() {
    console.log(2)
  },
  mixins: [mixin]
})

// => 1
// => 2

擴充套件

要從其擴充套件的“基類”元件。

型別

interface ComponentOptions {
  extends?: ComponentOptions
}

詳情
允許一個元件擴充套件另一個元件，繼承其元件選項。
從實現的角度來看，extends幾乎與mixins相同。由extends指定的元件將被視為第一個混合。
但是，extends和mixins表達了不同的意圖。mixins選項主要用於組合功能塊，而extends主要關注繼承。
與 mixins 一樣，任何選項（除 setup() 外）都將使用相關的合併策略進行合併。
示例
JavaScript
```
const CompA = { ... }

const CompB = {
  extends: CompA,
  ...
}
```
不推薦用於 Composition API
extends 是為 Options API 設計的，不能處理 setup() 鉤子的合併。
在 Composition API 中，邏輯複用的首選思維模式是“組合”而非“繼承”。如果你有一個需要在其他元件中複用的邏輯，考慮將其相關邏輯提取到可組合（Composable）中。
如果你仍然打算使用 Composition API “擴充套件”一個元件，你可以在擴充套件元件的 setup() 中呼叫基元件的 setup()
JavaScript
```
import Base from './Base.js'
export default {
  extends: Base,
  setup(props, ctx) {
    return {
      ...Base.setup(props, ctx),
      // local bindings
    }
  }
}
```

在 GitHub 上編輯此頁面

選項: 組合 ​

provide ​

注入 ​

混入 ​

擴充套件 ​

選項: 組合

provide

注入

混入

擴充套件