在 react 中，類似的需求是通過 HOC 的方式來解決的，但是仔細想想的話，react 在早些的版本也是支持 mixin 特性的，只不過後來將它標註為了 deprecated。
mixin 雖然作為分發可複用功能的常用手段，但是它是一把雙刃劍，除了它所帶來的便利性之外，它還有以下缺點：
- 混入的 mixin 可能包含隱式的依賴項，這在某些情況下可能不是調用者所期望的
- 多個 mixin 可能會造成命名衝突問題，且混入結果取決於混入順序
- 使用不當容易使項目的複雜度呈現滾雪球式的增長
所以是否有除了 mixin 以外的替代方案呢？答案當時也是有的，那就是使用 vue 中提供的作用域插槽特性。
實現
這裡關於作用域插槽的知識同樣不贅述了，不熟悉的讀者可以去官方文檔瞭解。我們可以在 toggle 組件模板中的 slot 標籤上將所有與其上下文相關的方法及屬性傳遞給它，如下：
這樣，我們可以通過 slot-scope 特性將這些方法和屬性取出來，如下：
當然，相比上一篇文章，我們需要對 custom-button 和 custom-status-indicator 組件做一些簡單的更改，只需要將混入 mixin 的邏輯去掉，並分別聲明相應的 props 屬性即可。
成果
通過作用域插槽，我們有效地避免了第三方組件由於混入 toggleMixin 而可能造成的命名衝突以及隱式依賴等問題。
你可以下面的鏈接來看看這個組件的實現代碼以及演示：
- sandbox: 在線演示
- github: part-4
總結
mixin 雖好，但是一定不要濫用，作為組件開發者，可以享受它帶來的便利性，但是它對於組件調用者來說，可能會造成一些不可預料的問題，通過作用域插槽，我們可以將這種問題發生的程度降到最小，同時解決 mixin 需要解決的問題。
對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料
知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！
閱讀更多 前端攻城小牛 的文章
