我們需要實現的需求是能夠使使用者通過元件動態地改變包含在它內部的內容。
熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用slot並配合v-if，我們這裡採用另外一種方法，利用 vue 提供的provide/inject屬性按照復合元件的思想來實現。
這裡簡單介紹下provide/inject的功能，它允許某個父元件向子元件注入乙個依賴項（這裡的父子關係可以跨域多個層級，也就是祖先與後代），如果我們在其他 mvvm 框架對比來看的話，你可以發現其他框架也具有相同的特性，比如：
想進一步了解的話，可以參考官方文件
在 vue 中，這裡我們會分別實現三個元件，依次為：
provide() }}
關於為什麼這裡不直接使用 on 屬性來代表開關狀態，而使用乙個可監聽物件，是因為provide和inject繫結並不是可響應的，同時官方文件也指出，這是刻意而為，所以為了享受到 vue 響應性帶來的便利性，我們這裡傳入 status 這個可監聽物件。
inject:"togglecomp"與之前的 provide 物件中宣告的 key 值所對應，而 inject 物件的 key 值當前元件注入依賴項的變數名稱，之後，子元件即可以通過this.togglecomp來訪問父元件的屬性與方法。
通過復合元件的方式，我們將toggle元件劃分為了三個更小的、職責更加單一的子元件。同時由於toggle-on和toggle-off都使用 slot 來動態地注入元件呼叫者在其內部包含的自定義渲染邏輯，其靈活性得到了進一步的提公升，只要這三個元件是作為toggle元件的子元件來呼叫，一切都將正常執行。
github: part-2
通常情況下，在設計和實現職能分明的元件時，可以使用這種模式，比如tabs與tab元件，tabs只負責tab的滾動、導航等邏輯，而tab本身僅負責內容的渲染，就如同這裡的toggle和toggle-button、`toggle-on、toggle-off一樣。
高階 vue 元件模式 6
之前的五篇文章中，switch元件一直是被視為內部元件存在的，細心的讀者應該會發現，這個元件除了幫我們提供開關的互動以外，還會根據當前toggle的開關狀態，為button元素增加aria expanded屬性，以aira開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好...
高階 Vue 元件模式 3
之前一篇文章中，我們雖然將toggle元件劃分為了toggle button toggle on和toggle off三個子元件，且一切執行良好，但是這裡面其實是存在一些問題的 如果熟悉 react 的讀者這裡可能馬上就會想到 hoc 高階元件 的概念，而且這也是 react 中乙個很常見的模式，該...
高階 Vue 元件模式 1
去年，曾經閱讀過一系列關於高階 react 元件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關於高階 angular 元件模式的文章，碰巧最近接手了乙個公司專案，前端這塊的技術棧是 vue。我對於 vue 本身還是比較熟悉的，不過大多都是一些很簡單的個人專案，在構建相對比較複雜的應用中缺乏實...