之前一篇文章中，我們雖然將toggle元件劃分為了toggle-button、toggle-on和toggle-off三個子元件，且一切執行良好，但是這裡面其實是存在一些問題的：
如果熟悉 react 的讀者這裡可能馬上就會想到 hoc（高階元件） 的概念，而且這也是 react 中乙個很常見的模式，該模式能夠提高 react 元件的復用程度和靈活性。在 vue 中，我們是否也有一些手段或特性來提高元件的復用程度和靈活性呢？答案當然是有的，那就是 mixin。
關於 mixin 本身的知識，這裡就不做過多贅述了，不熟悉的讀者可以去官方文件了解。我們通過宣告乙個叫作 togglemixin 的 mixin 來抽離公共的注入邏輯，如下：
export const withtogglemixin =
};
toggle元件提供的依賴項時，就混入當前 mixin，如下:
mixins: [withtogglemixin]export function withtoggle(parentcompname = "togglecomp")
};}
mixins: [withtoggle("toggle")]this.togglecomp，而是this.toggle。
github: part-3
mixin 作為一種分發 vue 元件中可復用功能的非常靈活的方式，可以在很多場景下大展身手，尤其在一些處理公共邏輯的元件，比如通知、表單錯誤提示等，使用這種模式尤其有用。
github gist
高階 vue 元件模式 6
之前的五篇文章中，switch元件一直是被視為內部元件存在的，細心的讀者應該會發現，這個元件除了幫我們提供開關的互動以外，還會根據當前toggle的開關狀態，為button元素增加aria expanded屬性，以aira開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好...
高階 Vue 元件模式 1
去年，曾經閱讀過一系列關於高階 react 元件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關於高階 angular 元件模式的文章，碰巧最近接手了乙個公司專案，前端這塊的技術棧是 vue。我對於 vue 本身還是比較熟悉的，不過大多都是一些很簡單的個人專案，在構建相對比較複雜的應用中缺乏實...
高階 Vue 元件模式 2
我們需要實現的需求是能夠使使用者通過元件動態地改變包含在它內部的內容。熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用slot並配合v if，我們這裡採用另外一種方法，利用 vue 提供的provide inject屬性按照復合元件的思想來實現。這裡簡單介紹下provide inject的...