高級 Vue 組件模式 (4)

04 使用 slot 替換 mixin

目標

在第三篇文章中，咱們使用 mixin 來抽離了注入 toggle 依賴項的公共邏輯。在 react 中，相似的需求是經過 HOC 的方式來解決的，可是仔細想一想的話，react 在早些的版本也是支持 mixin 特性的，只不事後來將它標註爲了 deprecated。

mixin 雖然做爲分發可複用功能的經常使用手段，可是它是一把雙刃劍，除了它所帶來的便利性以外，它還有如下缺點：

• 混入的 mixin 可能包含隱式的依賴項，這在某些狀況下可能不是調用者所指望的
• 多個 mixin 可能會形成命名衝突問題，且混入結果取決於混入順序
• 使用不當容易使項目的複雜度呈現滾雪球式的增加

因此是否有除了 mixin 之外的替代方案呢？答案當時也是有的，那就是使用 vue 中提供的做用域插槽特性。

實現

這裏關於做用域插槽的知識一樣不贅述了，不熟悉的讀者能夠去官方文檔瞭解。咱們能夠在 toggle 組件模板中的 slot 標籤上將全部與其上下文相關的方法及屬性傳遞給它，以下：

<div class="toggle">
  <slot :status="status" :toggle="toggle"></slot>
</div>

這樣，咱們能夠經過 slot-scope 特性將這些方法和屬性取出來，以下：

<template slot-scope="{status, toggle}">
  <custom-button :on="status.on" :toggle="toggle"></custom-button>
  <custom-status-indicator :on="status.on"></custom-status-indicator>
</template>

固然，相比上一篇文章，咱們須要對 custom-button 和 custom-status-indicator 組件作一些簡單的更改，只須要將混入 mixin 的邏輯去掉，並分別聲明相應的 props 屬性便可。

成果

經過做用域插槽，咱們有效地避免了第三方組件因爲混入 toggleMixin 而可能形成的命名衝突以及隱式依賴等問題。

你能夠下面的連接來看看這個組件的實現代碼以及演示：

• sandbox: 在線演示
• github: part-4

總結

mixin 雖好，可是必定不要濫用，做爲組件開發者，能夠享受它帶來的便利性，可是它對於組件調用者來講，可能會形成一些不可預料的問題，經過做用域插槽，咱們能夠將這種問題發生的程度降到最小，同時解決 mixin 須要解決的問題。

目錄

github gist

歡迎關注公衆號 全棧101，只談技術，不談人生