Vue.js mixins用法及代碼示例

要混合到當前組件中的選項對象數組。

類型

interface ComponentOptions {
  mixins?: ComponentOptions[]
}

細節：

mixins 選項接受一個 mixin 對象數組。這些 mixin 對象可以像普通實例對象一樣包含實例選項，並且它們將使用特定的選項合並邏輯與最終選項合並。例如，如果你的 mixin 包含一個 created 鉤子並且組件本身也有一個，那麽這兩個函數都會被調用。

Mixin 鉤子按照它們提供的順序被調用，並且在組件自己的鉤子之前被調用。

不再推薦

在 Vue 2 中，mixin 是創建可重用組件邏輯塊的主要機製。雖然 Vue 3 繼續支持 mixins，但Composition API 現在是組件之間代碼重用的首選方法。

例子：

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

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

// => 1
// => 2

相關用法

注：本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 mixins。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。