高級 Vue 組件模式 (1)

lanffy 發(fā)布于2019-08-23 12:26 / 3553人閱讀

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

寫在前頭

去年，曾經(jīng)閱讀過一系列關于高級 react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關于高級 angular 組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術棧是 vue。我對于 vue 本身還是比較熟悉的，不過大多都是一些很簡單的個人項目，在構建相對比較復雜的應用中缺乏實踐經(jīng)驗，就想著也搜搜類似題材的文章，漲漲知識。結果似乎沒有找到（其實也是有一些的，只不過不是和 react 和 angular 對比來寫的），不如就按照 react 和 angular 這兩個系列文章的思路，使用 vue 來親自實現(xiàn)一次吧。

由于三個框架的設計思想、語法都有比較大的區(qū)別，所以在實現(xiàn)過程中，均使用更符合 vue 風格的方式去解決問題，同時也提供一些對比，供讀者參考，如果觀點有誤，還望指正。

01 實現(xiàn)一個 toggle 組件

這個系列的文章的第一篇，都會從實現(xiàn)一個最簡單的 toggle 組件開始。

在 Vue 中，我們通過 data 來聲明一個 checked 屬性，這個屬性所控制的狀態(tài)代表組件本身的開關狀態(tài)，這個狀態(tài)會傳遞給負責渲染開關變換邏輯的 switch 組件中，關于 switch 組件，這里不做過多介紹，你把它當作一個私有組件即可，其內(nèi)部實現(xiàn)與該篇文章沒有太大的關聯(lián)。同時這個組件還擁有一個 on 屬性，用來初始化 checked 的狀態(tài)值。

通過在 switch 組件注冊原生 click 事件，toggle 組件還會觸發(fā)一個 toggled 事件，在 App 組件中，我們會監(jiān)聽這個事件，并將其回傳的值打印到控制臺中。你可以下面的鏈接來看看這個組件的實現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-1

總結

toggle組件的實現(xiàn)是一個很典型的利用單向數(shù)據(jù)流作為數(shù)據(jù)源的簡單組件：

on 是單向數(shù)據(jù)源，checked 代表組件內(nèi)部的開關狀態(tài)

通過觸發(fā) toggle 事件，將 checked 狀態(tài)的變化傳遞給父組件

github gist

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/98499.html

高級 Vue 組件模式 (3)

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

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

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

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

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

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

摘要：使用目標到目前為止，僅從組件自身的角度來看，它已經(jīng)可以滿足大多數(shù)的業(yè)務場景了。但我們會發(fā)現(xiàn)一個問題，就是當前組件的狀態(tài)對于調(diào)用者來說，完全是黑盒狀態(tài)，即調(diào)用者無法初始化，也無法更改組件的開關狀態(tài)，這在一些場景無法滿足需求。 07 使用 State Initializers 目標到目前為止，僅從 toggle 組件自身的角度來看，它已經(jīng)可以滿足大多數(shù)的業(yè)務場景了。但我們會發(fā)現(xiàn)一個問題，...

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

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

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