高級 Vue 組件模式 (4)

LancerComet 發布于2019-08-23 12:27 / 860人閱讀

摘要：使用替換目標在第三篇文章中，我們使用來抽離了注入依賴項的公共邏輯。成果通過作用域插槽，我們有效地避免了第三方組件由于混入而可能造成的命名沖突以及隱式依賴等問題。

04 使用 slot 替換 mixin 目標

在第三篇文章中，我們使用 mixin 來抽離了注入 toggle 依賴項的公共邏輯。在 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 需要解決的問題。

github gist

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

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98537.html

高級 Vue 組件模式 (1)

摘要：寫在前頭去年，曾經閱讀過一系列關于高級組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術棧是。同時這個組件還擁有一個屬性，用來初始化的狀態值。寫在前頭去年，曾經閱讀過一系列關于高級 react 組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級 angular 組件模式的文章，碰巧最近接手了一個公...

lanffy 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (3)

摘要：在中，我們是否也有一些手段或特性來提高組件的復用程度和靈活性呢答案當然是有的，那就是。成果通過實現，我們成功將注入的邏輯抽離了出來，這樣每次需要共享組件的狀態和方法時，混入該即可。 03 使用 mixin 來增強 Vue 組件目標之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良...

iKcamp 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (2)

摘要：編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。成果通過復合組件的方式，我們將組件劃分為了三個更小的職責更加單一的子組件。 02 編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...

Galence 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (5)

摘要：你可以下面的鏈接來看看這個組件的實現代碼以及演示在線演示總結當期望獲得子元素或者子組件的引用時，切記使用和來解決問題。 05 使用 $refs 訪問子組件引用目標在之前的文章中，詳細闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問子組件的一些方法和屬性怎么辦呢？設想以下一個場景：當前的 custom-button 組件中，有一個 input 元素...

woshicixide 2019-08-23 12:27 評論0 收藏0
高級 Vue 組件模式 (9)

摘要：在中，這種類型的組件也可以叫做函數式組件。這種組件和普通組件相比的優勢主要在于，它是無狀態的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。 09 使用 Functional 組件目標到此為止，我們的 toggle 組件已經足夠強大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會發現，整篇文章中，我幾乎沒有對 to...

李義 2019-08-23 12:36 評論0 收藏0