高級 Vue 組件模式 (1)

寫在前頭

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

因爲三個框架的設計思想、語法都有比較大的區別，因此在實現過程當中，均使用更符合 vue 風格的方式去解決問題，同時也提供一些對比，供讀者參考，若是觀點有誤，還望指正。

01 實現一個 toggle 組件

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

在 Vue 中，咱們經過 data 來聲明一個 checked 屬性，這個屬性所控制的狀態表明組件自己的開關狀態，這個狀態會傳遞給負責渲染開關變換邏輯的 switch 組件中，關於 switch 組件，這裏不作過多介紹，你把它看成一個私有組件便可，其內部實現與該篇文章沒有太大的關聯。同時這個組件還擁有一個 on 屬性，用來初始化 checked 的狀態值。

經過在 switch 組件註冊原生 click 事件，toggle 組件還會觸發一個 toggled 事件，在 App 組件中，咱們會監聽這個事件，並將其回傳的值打印到控制檯中。你能夠下面的連接來看看這個組件的實現代碼以及演示：

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

總結

toggle組件的實現是一個很典型的利用單向數據流做爲數據源的簡單組件：

• on 是單向數據源，checked 表明組件內部的開關狀態
• 經過觸發 toggle 事件，將 checked 狀態的變化傳遞給父組件

目錄

github gist

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