連續幾天沒空寫文章了，最近忙著弄一個小程序，經過幾天的coding，終于在今天下午提交審核，等待審核中....

大家久等了，是時候接著學習我們的vue基礎系列教程了，第一節我們就介紹過，vue有兩大核心：數據驅動和組件。

傳送門:《Vue框架是什么，為什么選它？》

我們在之前的章節，已經詳細地介紹了vue的數據驅動，從這一節開始，我們就來學習另一個核心：組件。

(沒錯，又是這張圖)

組件是我們人為地把頁面合理地拆分成一個個區塊，讓這些區塊更方便我們重復使用，有了組件，我們可以更高效合理地開發和維護我們的項目。

竟然說得組件那么好用，那我們就來好好學學怎么使用它。

規劃組件

假設我們頁面上有這樣的一個布局：

（多個相同或類似的區塊）

上圖是我們模仿微信公眾號的“歷史消息”的界面，我們看到的是一個文章的目錄列表，在我們公眾號，則看到的是我們《Vue2.0基礎》的系列文章。

這種情況下，我們把每一個文章標題區塊看作一個組件來進行規劃，這樣就方便我們去復用這個組件：

（規劃組件）

實現組件

我們學會了如何規劃出一個組件，接下來，我們看看在vue中如何實現一個組件。

（這一部分看作一個組件）

我們用傳統的實現方式一個組件，html代碼如下：

<div class="unit">
??? <div class="content">
??????? <h1>這里是文章的標題</h1>
??????? <div class="info">
??????????? <span>2017年4月10日</span>
??????????? <span class="original">原創</span>
??????? </div>
??? </div>
??? <img src="cover.jpg" alt="">
</div>

忽略css（這里我們不介紹css），我們看到了上面html代碼結構，class為unit的<div>容器以及它的子孫節點組成了我們的組件。在vue組件中，這些代碼將作為我們組件的模板template。

什么意思？我們來看看vue如何實現一個組件的。

首先，我們還是先創建一個vue實例，很熟練了，沒難度。

<div id="app"></div>
<script>
??? let vm = new Vue({
?????? el:"#app",
??? });
</script>

成功創建了一個vue實例vm，掛載元素為id為app的div節點。

接下來，我們在創建實例vm之前，利用vue提供的API來注冊一個組件。稍微修改一下上面的代碼：

<div id="app"></div>
<script>
??? Vue.component('my-article',{
?????? template:`<div>
??????????????? <div>
??????????????? <h1>這里是文章的標題</h1>
??????????????? <div>
?? ?????????????<span>2017年4月10日</span>
??????????????? <span>原創</span>
??????????????? </div>
??????????????? </div>
??????????????? <img src="cover.jpg" alt="">
??????????????? </div>`
??? });

??? let vm = new Vue({
?????? el:"#app",
??? });
</script>

我們使用了vue提供的全局API ??Vue.component()?，注冊了一個名為：“my-article”的組件，而組件的template正好是我們上面的html代碼，這樣，我們就可以用?<my-article></ my-article>?的方式來使用我們的組件。

注意：一定要確保實例vm在創建之前，?<my-article>?組件已經被成功注冊，這也是為什么我們要把代碼寫在實例化之前。

既然注冊了組件?<my-article>?，我們就來使用這個自定義的組件：

<div id="app">
??? <my-article></my-article>
</div>

我們看看渲染的結果：

（渲染效果）

我們看到最終渲染的不是標簽<my-article></my-article>，而是我們組件的模板template的值。我們成功地注冊一個自定義的組件并使用它。

但這并不夠，我們有的文章目錄中不僅僅只有一篇文章，而且每篇文章的標題和日期都不一樣，我們如何動態地展示它們的數據呢？

這里就涉及到了組件的傳參props，沒錯，不但函數可以接受參數，vue的組件也可以。接下來，我們看看怎么實現傳參。

我們知道，組件中的這4部分是需要動態獲取數據的：標題，發布日期，是否原創，文章封面圖。

那么，我們就通過傳參的方式把這些數據傳到組件，實現數據動態展示。

首先，我們把數據存儲在實例vm的data中：

let vm = new Vue({
?? el:"#app",
?? data:{
?????? article:{
?????????? title:"第一節：Vue.js框架是什么，
為什么選擇它？",
?????????? date:" 2017年03月06日",
?????????? is_original:true,
?????????? cover_url:"cover.jpg"
?????? }
?? }
});

我們給data增加了一個文章article的信息，包括：標題title，發布日期date，是否原創is_original，封面圖片cover_url。

文章的信息有了，我們怎么傳到組件中去呢？

<div id="app">???
?<my-article :detail="article"></my-article>
</div>

就像一個函數傳參一樣，你可以把detail理解成一個形參，article相當于實參。

我們給組件傳了參，組件內部怎么接受并使用呢？我們接著看，十分簡單！

我們把注冊組件的代碼稍微修改一下：

Vue.component('my-article',{
?? props:['detail'],
?? template:`<div>
??????????? <div>
??????????? <h1>{{detail.title}}</h1>
??????????? <div>
? ??????????<span>{{detail.date}}</span>
??????????? <span v-show="detail.is_original">原創</span>
??????????? </div>
??????????? </div>
??????????? <img :src="detail.cover_url" alt="">
??????????? </div>`
});

除了template以外，我們增加了props，通過它來接受我們的參數detail，傳進來之后，你可以在組件的模板template中使用它所接受的所有數據了。比如，我們傳進來的數據包含著文章的信息：title，date，is_original，cover_url。

讀取文章的標題：

<h1>{{detail.title}}</h1>

讀取文章的發布日期：

<span>{{detail.date}}</span>

讀取文章是否原創，并通過?v-show?指令控制顯示/隱藏：

<span v-show="detail.is_original">原創</span>

讀取文章的封面圖片地址：

<img :src="detail.cover_url">

竟然讀取了數據，我們就看看渲染結果：

（數據動態讀取）

數據是動態讀取了，那么我們的目錄并不僅僅只有一篇文章，當我們數據多了之后，該用什么方式展示出來呢？

let vm = new Vue({
?? el:"#app",
?? data:{
?????? articles:[
?????????? {
?????????????? title:"第一節：Vue.js框架是什么，
為什么選擇它？",
????????????? ?date:" 2017年03月06日",
?????????????? is_original:true,
?????????????? cover_url:"cover.jpg"
?????????? },
?????????? {
?????????????? title:"第二節：簡易安裝 和
快速入門Vue.js",
?????????????? date:" 2017年03月09日",
?????????????? is_original:true,
?????????????? cover_url:"cover.jpg"
?????????? },
?????????? {
?????????????? title:"第三節：創建一個Vue實例，
超簡單",
?????????????? date:" 2017年03月17日",
?????????????? is_original:true,
?????????????? cover_url:"cover.jpg"
?????????? },
?????????? {
?????????????? title:"第四節：定義一個vue實例的
4個常用選項",
?????????????? date:" 2017年03月20日",
?????????????? is_original:true,
?????????????? cover_url:"cover.jpg"
?????????? },
?????? ]
?? }
});

假設我們的articles中有4篇文章的信息。

也許你已經相當到了，我們可以使用?v-for?指令，它是專門用于處理列表渲染的指令。結合我們的組件，一起來實現這個文章目錄的效果。

非常簡單，組件我們已經封裝好，我們只需要給它傳參即可，所以我們不需要改動組件的代碼。而articles是一個數組，我們用?v-for?指令對它進行遍歷即可。

我們對html代碼稍微改動一下：

<div id="app">
?? ?<my-article
??????????? v-for="item in articles"
??????????? :detail="item">
??? </my-article>
</div>

代碼很簡單，我們在組件上加上了?v-for?指令，并遍歷了articles。

渲染結果：

（4篇文章的信息成功地渲染出來）

本節小結

掌握如何規劃設計一個組件，注冊以及其注意事項，運用組件與?v-for?指令實現列表渲染。

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

?2.《實戰前必須掌握的10個指令(上)》

?3.《實戰前必須掌握的10個指令(上)》

總結

以上是生活随笔為你收集整理的第九节：掌握vue的另一个核心：组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。