高級Vue組件模式3

NO IMAGE

03 使用 mixin 來增強 Vue 組件

目標

之前一篇文章中,我們雖然將 toggle 組件劃分為了 toggle-buttontoggle-ontoggle-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-buttoncustom-status-indicator,前者是自定義開關,使用 withToggleMixin 來混入注入邏輯,後者是自定義的狀態指示器,使用 withToggle 高階函數來混入注入邏輯。

你可以下面的鏈接來看看這個組件的實現代碼以及演示:

總結

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

目錄

github gist

相關文章

高級Vue組件模式(7)

高級vue組件模式6

高級vue組件模式5

高級vue組件模式4