[Vue 牛刀小試]：第八章 - 組件的基礎知識

 1、前言

　　在以前的學習中，咱們對於 Vue 的一些基礎語法進行了簡單的瞭解，經過以前的代碼能夠清晰的看出，咱們在使用 Vue 的整個過程，最終都是在對 Vue 實例進行的一系列操做。
　　這裏就會引出一個問題，就像咱們剛開始學習 C# 的時候把所有的代碼一股腦的寫到 Main 方法中，如今咱們把全部對於 Vue 實例的操做所有寫在一塊，這必然會致使 這個方法又長又很差理解。
　　在 C# 的學習過程當中，隨着不斷學習，咱們開始將一些類似的業務邏輯進行封裝，重用一些代碼，從而達到簡化的目的。那麼，如何在 Vue 中如何實現類似的功能呢？這裏就須要提到組件這一律唸了，本章，咱們就來學習 Vue 中組件的基礎知識。

　　學習系列目錄地址：http://www.javashuo.com/article/p-bzzucmub-ba.html

　　倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/Chapter02-Bronze/component/concept.html

 2、乾貨合集

　　一、組件是什麼

　　組件是 Vue 中的一個重要概念，它是一種抽象，是一個能夠複用的 Vue 實例，它擁有獨一無二的組件名稱，它能夠擴展咱們的 HTML 元素，以組件名稱的方式做爲咱們自定義的 HTML 標籤。由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。
　　例如，在一個系統的絕大多數的網頁中，網頁都包含 header、menu、body、footer 等等部分，在不少時候，同一個系統中的多個頁面，可能僅僅是頁面中 body 部分顯示的內容不一樣，所以，咱們就能夠將系統中重複出現的頁面元素設計成一個個的組件，當咱們須要使用到的時候，引用這個組件便可。

　　不過，與咱們在寫 C# 時對代碼進行模塊化的劃分不一樣，模塊化主要是爲了實現每一個模塊、方法的職能單一，咱們通常是經過代碼邏輯的角度進行劃分；而 Vue 中的組件化，更多的是爲了實現對於前端 UI 組件的重用。
　　在 Vue 中建立一個新的組件以後，爲了能在模板中使用，這些組件必須先進行註冊以便 Vue 可以識別。在 Vue 中有兩種組件的註冊類型：全局註冊和局部註冊。
　　全局註冊的組件能夠用在其被註冊以後的任何 (經過 new Vue) 新建立的 Vue 根實例，也包括其組件樹中的全部子組件的模板中使用；而局部註冊的組件只能在當前註冊的 Vue 實例中進行使用。

　　二、全局組件的建立方式

　　在 Vue 中建立全局組件，一般的作法是先使用 Vue.extend 方法構建模板對象，而後經過 Vue.component 方法來註冊咱們的組件，由於，組件最後會被解析成自定義的 HTML 代碼，所以，咱們能夠直接在 html 中經過組件名稱做爲標籤使用。

<div id="app">
    <com></com>
</div>

<script>
    //一、使用 Vue.extend 構建模板對象
    var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 註冊全局組件
 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>

　　從控制檯中能夠看到，咱們自定義的組件已經被解析成了 HTML 元素。這裏，須要注意一個問題，當咱們採用 Camel 的方式命名咱們的組件時，在使用這個組件的時候，須要將大寫字母改爲小寫字母，同時，兩個字母之間須要使用 - 進行鏈接。

<div id="app">
    <my-com></my-com>
</div>

<script>
    //一、使用 Vue.extend 構建模板對象
    var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 註冊全局組件
 Vue.component('myCom', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>

　　固然，咱們也能夠直接在 Vue.component 中以一種相似 C# 中的匿名對象的方式直接註冊全局組件。

<div id="app">
    <com2></com2>
    <com3></com3>
</div>

<script> Vue.component('com2', Vue.extend({ template: '<h3>這是直接使用 Vue.component 建立的組件，啊啊啊啊啊啊</h3>' })) Vue.component('com3', { template: '<h3>這是直接使用 Vue.component 建立的組件，啊啊啊啊啊啊</h3>' }) var vm = new Vue({ el: '#app', data: {} }); </script>

　　上面的示例中，只是在 template 屬性中定義了一個簡單的 html 代碼，在實際的使用中，template 屬性指向的模板內容可能包含不少的元素，而使用 Vue.extend 建立的模板必須有且只有一個根元素，所以，當須要建立具備複雜元素的模板時，你能夠在最外層再套一個 div。

<div id="app">
    <com></com>
</div>

<script>
    //一、使用 Vue.extend 構建模板對象
    var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3><h4>嗚嗚嗚嗚</h4>' }) //二、使用 Vue.component 註冊全局組件
 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>

　　當 template 屬性中包含不少的元素時，不能使用代碼提示仍是會顯得比較不方便，這時，咱們可使用 template 標籤來定義咱們的模板，經過 id 來肯定組件的模板信息。

<div id="app">
    <com></com>
</div>

<template id="tmpl">
    <div>
        <h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>
        <h4>嗚嗚嗚嗚</h4>
    </div>
</template>


<script> Vue.component('com', { template: '#tmpl' }) var vm = new Vue({ el: '#app', data: {} }); </script>
</body>

　　三、局部組件的建立方式

　　某些時候，咱們註冊的組件只想在一個 Vue 實例中使用，若是仍是使用全局註冊的方式註冊組件就顯得不太合適了，這時，咱們就可使用局部註冊的方式註冊組件。在 Vue 實例中，咱們能夠經過 components 屬性註冊僅在當前做用域下可用的組件。

<div id="app">
    <simple-com></simple-com>
</div>

<div id="app2">
    <simple-com></simple-com>
</div>

<template id="local">
    <h4>我是局部註冊的組件啊啊啊啊啊啊啊啊</h4>
</template>

<script>
    var vm = new Vue({ el: '#app', data: {} }); var vm2 = new Vue({ el: '#app2', data: {}, components: { 'simple-com': { template: '#local' } } }); </script>

　　能夠看到，在上面的例子中，局部註冊的組件只能在註冊的 vm2 實例中完成解析，當咱們在 vm 實例中引用這個組件時，是沒法正確解析這個自定義的組件元素的。

 3、總結

　　在本章中，主要介紹了組件是什麼，以及如何經過全局/局部的方式註冊咱們的組件。在咱們使用組件的過程當中，很大的可能會接觸到兩個組件之間的數據交互，以及如何爲咱們的組件設定事件，在下一章中，咱們將進一步的學習 Vue 中的組件相關知識點。

 4、參考

　　一、Vue.js——60分鐘組件快速入門（上篇）

　　二、認識Vue組件

　　三、Vue 2.0學習筆記：組件的使用

　　四、初學vue2.0-組件-文檔理解筆記v1.0