高級(jí) Vue 組件模式 (3)

iKcamp 發(fā)布于2019-08-23 12:26 / 3484人閱讀

摘要：在中，我們是否也有一些手段或特性來(lái)提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過(guò)實(shí)現(xiàn)，我們成功將注入的邏輯抽離了出來(lái)，這樣每次需要共享組件的狀態(tài)和方法時(shí)，混入該即可。

03 使用 mixin 來(lái)增強(qiáng) Vue 組件 目標(biāo)

之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個(gè)子組件，且一切運(yùn)行良好，但是這里面其實(shí)是存在一些問(wèn)題的：

toggle 組件的內(nèi)部狀態(tài)和方法只能和這三個(gè)子組件共享，我們期望第三方的組件也可以共享這些狀態(tài)和方法

inject 的注入邏輯我們重復(fù)編寫(xiě)了三次，如果可以的話，我們更希望只聲明一次（DRY原則）

inject 的注入邏輯當(dāng)前為硬編碼，某些情況下，我們可能期望進(jìn)行動(dòng)態(tài)地配置

如果熟悉 react 的讀者這里可能馬上就會(huì)想到 HOC（高階組件）的概念，而且這也是 react 中一個(gè)很常見(jiàn)的模式，該模式能夠提高 react 組件的復(fù)用程度和靈活性。在 vue 中，我們是否也有一些手段或特性來(lái)提高組件的復(fù)用程度和靈活性呢？答案當(dāng)然是有的，那就是 mixin。

實(shí)現(xiàn)

關(guān)于 mixin 本身的知識(shí)，這里就不做過(guò)多贅述了，不熟悉的讀者可以去官方文檔了解。我們通過(guò)聲明一個(gè)叫作 toggleMixin 的 mixin 來(lái)抽離公共的注入邏輯，如下：

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"
  }
};

之后，每當(dāng)需要注入 toggle 組件提供的依賴項(xiàng)時(shí)，就混入當(dāng)前 mixin，如下:

mixins: [withToggleMixin]

如果關(guān)于注入的邏輯，我們?cè)黾右恍╈`活性，比如期望自由地聲明注入依賴項(xiàng)的 key 時(shí)，我們可以借由 HOC 的概念，聲明一個(gè)高階 mixin（可以簡(jiǎn)稱 HOM ?? 皮一下，很開(kāi)心），如下：

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

這個(gè) HOC mixin 可以按如下的方式使用：

mixins: [withToggle("toggle")]

這樣在當(dāng)前的組件中，調(diào)用 toggle 組件相關(guān)狀態(tài)和方法時(shí)，就不再是 this.toggleComp，而是 this.toggle。

成果

通過(guò)實(shí)現(xiàn) toggleMixin，我們成功將注入的邏輯抽離了出來(lái)，這樣每次需要共享 toggle 組件的狀態(tài)和方法時(shí)，混入該 mixin 即可。這樣就解決了第三方組件無(wú)法共享其狀態(tài)和方法的問(wèn)題，在在線實(shí)例代碼中，我實(shí)現(xiàn)了兩個(gè)第三方組件，分別是 custom-button 和 custom-status-indicator，前者是自定義開(kāi)關(guān)，使用 withToggleMixin 來(lái)混入注入邏輯，后者是自定義的狀態(tài)指示器，使用 withToggle 高階函數(shù)來(lái)混入注入邏輯。

你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-3

總結(jié)

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

github gist