高階 Vue 元件模式 3

HaoliangWu發表於2018-10-21
Vue元件模式

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 高階函式來混入注入邏輯。

你可以下面的連結來看看這個元件的實現程式碼以及演示：

總結

mixin 作為一種分發 Vue 元件中可複用功能的非常靈活的方式，可以在很多場景下大展身手，尤其在一些處理公共邏輯的元件，比如通知、表單錯誤提示等，使用這種模式尤其有用。

目錄

github gist

相關文章