一本讓你醍醐灌頂的小冊：《Vue.js組件精講》

三年前，我開始接觸 Vue.js 框架，當時就被它的輕量、組件化和友好的 API 所吸引。與此同時，我也開源了 iView 項目。三年的磨(cǎi )礪(kēng)，沉澱了很多關於 Vue.js 組件的經驗，因而乎，將 Vue.js 最精髓的內容，編寫了一本掘金小冊 《Vue.js組件精講》 。本小冊的內容也許不會讓你的技術一晚上間日新月異，但絕對使你醍醐灌頂。

全網的 Vue.js 文章已經足夠多了，不妨來看看這本不同的小冊吧。

👉👉 小冊購買地址 👈👈

↓↓↓↓↓如下內容摘自個人掘金小冊↓↓↓↓↓

小冊介紹

Vue.js 無疑是前端最熱門的框架之一，而 Vue.js 最精髓的，正是它的組件。寫一個 Vue 工程，也就是在寫一個個的組件。換言之，學好了 Vue.js 的組件，也就能很好的駕馭 Vue.js 框架和變幻無窮的複雜業務場景。

現在，關於 Vue.js 的教程已經很是豐富，大部分開發者閱讀文檔後，均可以很快上手 Vue.js 的開發，而寫好每個組件，成了當前衆多開發者的一個難題。

Vue.js 的組件和組件化在使用中有很是多的技巧和最佳實踐，本小冊則針對 Vue.js 最核心的部分—組件，來深刻講解，帶着完整示例來解決一個個與組件相關的疑難點和知識點。

同時，做爲 Vue.js 知名組件庫 iView 的做者，深刻開發超過 50 個極其複雜的通用組件，包含了 Vue.js 組件的各個場景，對 Vue.js 的組件開發，有着獨樹一幟的看法和經驗。

做者介紹

Aresn，基於 Vue.js 的開源 UI 組件庫 — iView 的做者（GitHub 超過 18000 星）。現擔任大數據公司 TalkingData 前端架構師。暢銷書籍《Vue.js實戰》的做者（Vue.js 做者尤雨溪做序，銷量超 3 萬冊）。在掘金髮表衆多關於 Vue.js 的技術文章，得到點贊 7000+，閱讀 24 萬+。更多介紹能夠閱讀文章 《2016個人心路歷程：從 Vue 到 Webpack 到 iView》。

你會學到什麼？

• 瞭解 Vue.js 組件開發的精華
• Vue.js 組件知識全覆蓋
• 掌握多種 Vue.js 組件開發的模式
• 獨立組件不依賴 Vuex 和 Bus 狀況下，各類跨級通訊手段（provide / inject、broadcast / dispatch、findComponents 系列）
• 7 個完整的 Vue.js 組件示例
• 如何作好一個開源項目
• Vue.js 容易忽略的 API 詳解
• Vue.js 面試、常見問題答疑

小冊的內容

由於本小冊是圍繞 Vue.js 組件展開的，因此第二節會講解 Vue.js 組件的三個 API：prop、event、slot，固然，若是你已經開發過一些獨立組件，徹底能夠跳過這節內容。

3 - 7 小節會介紹組件間通訊的一些方法和黑科技，一部分是 Vue.js 內置的，一部分是自行實現的，在實際開發中，會很是實用。同時也利用這些方法完成了兩個具體的實戰案例：

1. 具備數據校驗功能的表單組件 —— Form；
2. 組合多選框組件 —— CheckboxGroup & Checkbox。

本小冊都會以這種核心科技 + 對應實戰的形式展開。

8 - 10 小節介紹 Vue 的構造器 extend 和手動掛載組件 $mount 的用法及案例。Vue.js 除了咱們正常 new Vue() 外，還能夠手動掛載的，這 3 節將介紹手動掛載一個 Vue 組件的使用場景。其中涉及到兩個案例：

1. 動態渲染 .vue 文件的組件 —— Display；
2. 全局通知組件 —— $Alert。

Display 組件用於將 .vue 文件渲染出來，線上的案例是 iView Run，它不須要你從新編譯項目，就能夠渲染一個標準的 Vue.js 組件。

$Alert 是全局的通知組件，它的調用方法不一樣於常規組件。常規組件使用方法形如：

<template>
    <Alert content="通知內容" :duration="3"></Alert>
</template>
<script> import Alert from '../components/alert.vue'; export default { components: { Alert } } </script>
複製代碼

而 $Alert 的調用更接近 JS 語法：

export default {
    methods: {
        showMessage () {
            this.$Alert({
                content: '通知內容',
                duration: 3
            });
        }
    }
}
複製代碼

雖然與常規 Vue 組件調用方式不一樣，但底層仍然由 Vue 組件構成和維護。

11 - 12 小節介紹 Render 函數與 Functional Render，並完成一個可以渲染自定義列的 Table 組件。Render 函數也是 Vue.js 組件重要的一部分，只不過在大多數業務中不常使用。本小節會介紹它的使用場景。

13 小節介紹做用域 slot（slot-scope），並基於這種方法一樣實現 Table 組件。slot 用的不少，但 slot-scope 在業務中並不經常使用，但在一些特定場景下，好比組件內部有循環體時，會很是實用。

14 - 15 小節介紹遞歸組件，並完成樹形控件 —— Tree。

16 - 19 小節是綜合拓展，會着重講解 Vue.js 容易忽略卻很重要的 API，以及對 Vue.js 面試題的詳細分析。除此以外，還會總結筆者在兩年的 iView 開源經歷中的經驗，除了技術細節外，還包括開源項目的持續性發展、推廣等。

準備出發

那麼，請準備好一臺電腦和一杯咖啡，一塊兒來探索 Vue.js 的精髓吧。

👉👉 小冊購買地址 👈👈