高階 Vue 元件模式 3
之前一篇文章中，我們雖然將toggle
元件劃分為了toggle-button
、toggle-on
和toggle-off
三個子元件，且一切執行良好，但是這裡面其實是存在一些問題的：
toggle
如果熟悉 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:ofollow,noindex">part-3