高級 Vue 組件模式 3

03 使用 mixin 來加強 Vue 組件

目標

以前一篇文章中，咱們雖然將 toggle 組件劃分爲了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良好，可是這裏面實際上是存在一些問題的：

• toggle 組件的內部狀態和方法只能和這三個子組件共享，咱們指望第三方的組件也能夠共享這些狀態和方法
• inject 的注入邏輯咱們重複編寫了三次，若是能夠的話，咱們更但願只聲明一次（DRY原則）
• inject 的注入邏輯當前爲硬編碼，某些狀況下，咱們可能指望進行動態地配置

若是熟悉 react 的讀者這裏可能立刻就會想到 HOC（高階組件） 的概念，並且這也是 react 中一個很常見的模式，該模式可以提升 react 組件的複用程度和靈活性。在 vue 中，咱們是否也有一些手段或特性來提升組件的複用程度和靈活性呢？答案固然是有的，那就是 mixin。

實現

關於 mixin 自己的知識，這裏就不作過多贅述了，不熟悉的讀者能夠去官方文檔瞭解。咱們經過聲明一個叫做 toggleMixin 的 mixin 來抽離公共的注入邏輯，以下：

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"
  }
};
複製代碼

以後，每當須要注入 toggle 組件提供的依賴項時，就混入當前 mixin，以下:

mixins: [withToggleMixin]
複製代碼

若是關於注入的邏輯，咱們增長一些靈活性，好比指望自由地聲明注入依賴項的 key 時，咱們能夠藉由 HOC 的概念，聲明一個高階 mixin（能夠簡稱 HOM ?? 皮一下，很開心），以下：

export function withToggle(parentCompName = "toggleComp") {
  return {
    inject: {
      [parentCompName]: "toggleComp"
    }
  };
}
複製代碼

這個 HOC mixin 能夠按以下的方式使用：

mixins: [withToggle("toggle")]
複製代碼

這樣在當前的組件中，調用 toggle 組件相關狀態和方法時，就再也不是 this.toggleComp，而是 this.toggle。

成果

經過實現 toggleMixin，咱們成功將注入的邏輯抽離了出來，這樣每次須要共享 toggle 組件的狀態和方法時，混入該 mixin 便可。這樣就解決了第三方組件沒法共享其狀態和方法的問題，在在線實例代碼中，我實現了兩個第三方組件，分別是 custom-button 和 custom-status-indicator，前者是自定義開關，使用 withToggleMixin 來混入注入邏輯，後者是自定義的狀態指示器，使用 withToggle 高階函數來混入注入邏輯。

你能夠下面的連接來看看這個組件的實現代碼以及演示：

• sandbox: 在線演示
• github: part-3

總結

mixin 做爲一種分發 Vue 組件中可複用功能的很是靈活的方式，能夠在不少場景下大展身手，尤爲在一些處理公共邏輯的組件，好比通知、表單錯誤提示等，使用這種模式尤爲有用。

目錄

github gist