資訊專欄INFORMATION COLUMN
摘要：使用替換目標(biāo)在第三篇文章中，我們使用來(lái)抽離了注入依賴項(xiàng)的公共邏輯。成果通過(guò)作用域插槽，我們有效地避免了第三方組件由于混入而可能造成的命名沖突以及隱式依賴等問(wèn)題。
04 使用 slot 替換 mixin 目標(biāo)
在第三篇文章中，我們使用 mixin 來(lái)抽離了注入 toggle 依賴項(xiàng)的公共邏輯。在 react 中，類似的需求是通過(guò) HOC 的方式來(lái)解決的，但是仔細(xì)想想的話，react 在早些的版本也是支持 mixin 特性的，只不過(guò)后來(lái)將它標(biāo)注為了 deprecated。
mixin 雖然作為分發(fā)可復(fù)用功能的常用手段，但是它是一把雙刃劍，除了它所帶來(lái)的便利性之外，它還有以下缺點(diǎn)：
混入的 mixin 可能包含隱式的依賴項(xiàng)，這在某些情況下可能不是調(diào)用者所期望的
多個(gè) mixin 可能會(huì)造成命名沖突問(wèn)題，且混入結(jié)果取決于混入順序
使用不當(dāng)容易使項(xiàng)目的復(fù)雜度呈現(xiàn)滾雪球式的增長(zhǎng)
所以是否有除了 mixin 以外的替代方案呢？答案當(dāng)時(shí)也是有的，那就是使用 vue 中提供的作用域插槽特性。
實(shí)現(xiàn)這里關(guān)于作用域插槽的知識(shí)同樣不贅述了，不熟悉的讀者可以去官方文檔了解。我們可以在 toggle 組件模板中的 slot 標(biāo)簽上將所有與其上下文相關(guān)的方法及屬性傳遞給它，如下：
這樣，我們可以通過(guò) slot-scope 特性將這些方法和屬性取出來(lái)，如下：
當(dāng)然，相比上一篇文章，我們需要對(duì) custom-button 和 custom-status-indicator 組件做一些簡(jiǎn)單的更改，只需要將混入 mixin 的邏輯去掉，并分別聲明相應(yīng)的 props 屬性即可。
成果通過(guò)作用域插槽，我們有效地避免了第三方組件由于混入 toggleMixin 而可能造成的命名沖突以及隱式依賴等問(wèn)題。
你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示：
sandbox: 在線演示
github: part-4
總結(jié)mixin 雖好，但是一定不要濫用，作為組件開(kāi)發(fā)者，可以享受它帶來(lái)的便利性，但是它對(duì)于組件調(diào)用者來(lái)說(shuō)，可能會(huì)造成一些不可預(yù)料的問(wèn)題，通過(guò)作用域插槽，我們可以將這種問(wèn)題發(fā)生的程度降到最小，同時(shí)解決 mixin 需要解決的問(wèn)題。
目錄github gist
歡迎關(guān)注公眾號(hào) 全棧101，只談技術(shù)，不談人生
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98537.html
摘要：寫(xiě)在前頭去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí)組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí)組件模式的文章，碰巧最近接手了一個(gè)公司項(xiàng)目，前端這塊的技術(shù)棧是。同時(shí)這個(gè)組件還擁有一個(gè)屬性，用來(lái)初始化的狀態(tài)值。 寫(xiě)在前頭 去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí) react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí) angular 組件模式的文章，碰巧最近接手了一個(gè)公...
摘要：在中，我們是否也有一些手段或特性來(lái)提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過(guò)實(shí)現(xiàn)，我們成功將注入的邏輯抽離了出來(lái)，這樣每次需要共享組件的狀態(tài)和方法時(shí)，混入該即可。 03 使用 mixin 來(lái)增強(qiáng) Vue 組件 目標(biāo) 之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個(gè)子組件，且一切運(yùn)行良...
摘要：編寫(xiě)復(fù)合組件目標(biāo)我們需要實(shí)現(xiàn)的需求是能夠使使用者通過(guò)組件動(dòng)態(tài)地改變包含在它內(nèi)部的內(nèi)容。成果通過(guò)復(fù)合組件的方式，我們將組件劃分為了三個(gè)更小的職責(zé)更加單一的子組件。 02 編寫(xiě)復(fù)合組件 目標(biāo) 我們需要實(shí)現(xiàn)的需求是能夠使使用者通過(guò) 組件動(dòng)態(tài)地改變包含在它內(nèi)部的內(nèi)容。 熟悉 vue 的童鞋可能馬上會(huì)想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...
摘要：你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示在線演示總結(jié)當(dāng)期望獲得子元素或者子組件的引用時(shí)，切記使用和來(lái)解決問(wèn)題。 05 使用 $refs 訪問(wèn)子組件引用 目標(biāo) 在之前的文章中，詳細(xì)闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問(wèn)子組件的一些方法和屬性怎么辦呢？設(shè)想以下一個(gè)場(chǎng)景： 當(dāng)前的 custom-button 組件中，有一個(gè) input 元素...
摘要：在中，這種類型的組件也可以叫做函數(shù)式組件。這種組件和普通組件相比的優(yōu)勢(shì)主要在于，它是無(wú)狀態(tài)的，這意味著它的可測(cè)試性和可讀性更好，同時(shí)一些情況下，渲染開(kāi)銷也更小。 09 使用 Functional 組件 目標(biāo) 到此為止，我們的 toggle 組件已經(jīng)足夠強(qiáng)大以及好用了，因此這篇文章不會(huì)再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會(huì)發(fā)現(xiàn)，整篇文章中，我?guī)缀鯖](méi)有對(duì) to...
閱讀 2662·2021-11-22 15:25
閱讀 1525·2021-11-15 17:59
閱讀 1218·2021-09-29 09:34
閱讀 1671·2021-09-26 09:46
閱讀 3116·2021-09-02 15:40
閱讀 1272·2019-08-30 15:56
閱讀 3364·2019-08-30 15:55
閱讀 752·2019-08-29 17:08
