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

Aresn發表於2018-12-20
Vue.js元件

三年前，我開始接觸 Vue.js 框架，當時就被它的輕量、元件化和友好的 API 所吸引。與此同時，我也開源了 iView 專案。三年的磨(cǎi )礪(kēng)，沉澱了不少關於 Vue.js 元件的經驗，於是乎，將 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 的元件開發，有著獨樹一幟的見解和經驗。

作者介紹

一本讓你醍醐灌頂的小冊：《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 的精髓吧。

?? 小冊購買地址 ??

來源：https://juejin.im/post/5c1b11d2f265da61461e1eb8

相關文章