理解vue中的組件（一）

看了Vue的文檔，寫得很簡潔，可是並不簡單。在本身學習的過程當中踩過很多的坑，學習的時候把官網的例子從頭至尾作了一遍，記錄在github中https://github.com/WYseven/vue2-basic-demo/tree/master/vue-demo，學習中也有本身的心得體會，記錄下來分享，但願對你的理解有所幫助。

組件是vue中很重要，這部分也是最難理解的，先聊一聊vue中的組件。

組件是什麼

在vue中組件是一個自定義元素，vue的編譯器爲它添加特殊功能；組件也能夠是原生的html元素，使用特殊的is來擴展。

看完以後，比較懵吧？我們慢慢解開組件的神祕面紗，先從一段佈局開始提及。

試想在佈局中的一個場景，自定義一個下拉框，須要先定義一個基本的結構：

<div class="select">
    <p>請選擇：</p>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>杭州</li>
    </ul>
</div>
<!--使用時一般是複製上面結構改數據-->
<div class="select">
    <p>請選擇：</p>
    <ul>
        <li>博士</li>
        <li>研究生</li>
        <li>本科</li>
    </ul>
</div>

定義好一個基本結構後，若是要再次使用，複製一份結構改變數據便可。這樣複製粘貼的作法沒什麼毛病，但忽略一個問題---若是要修改下拉框的結構。就會變得難以維護了。

假如我對這個結構不是很滿意，我要把p標籤改成span標籤，使用到下拉框的結構都要改，那可要修改不少地方。若是我要給結構中ul添加一個class，使用給到下拉框的地方都要修改，也要修改不少地方。這樣維護起來超級的麻煩。

能不能只寫一套結構，而後複用，相似於JavaScript中要複用多行代碼，能夠封裝成一個函數，在使用時只須要調用函數，無需重複寫多行代碼？答案是固然能夠。

在JavaScript中封裝的是一個函數，而後調用。那麼在html中就不能是函數了，而要定義成標籤，但要避開w3c規定的標籤，採用自定義標籤。

若是有一個自定義標籤< custom-select>表明的就是自定義的下拉框，那麼在須要使用下拉框的時候，只須要這樣來寫：

<custom-select></custom-select>
<custom-select></custom-select>
<custom-select></custom-select>

是否是變得精簡不少？

對於自定義標籤名字，能夠參考W3C規定

這樣只是一個自定義標籤而已，瀏覽器並不會解析爲自定義的下拉框結構。咱們真是的目的是要讓< custom-select>自定義標籤表明一段HTML結構，也就是在瀏覽器中展現的是自定義下拉框結構。

寫上自定義標籤：

<custom-select></custom-select>

最終會被解析爲如下結構纔是咱們想要的。

<div class="select">
    <p>請選擇：</p>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>杭州</li>
    </ul>
</div>

當使用vue時，解析的這個過程就交給Vue來作。

以上舉例中自定義標籤< custom-select>其實就是一個組件，vue的編譯器爲它添加特殊功能，最終會呈現咱們定義的結構。

咱們是從佈局結構重複使用引出要使用組件，固然組件還遠遠不止這些，它還有其餘的功能等着去探索。

定義組件

在vue中定義組件很是簡單，使用Vue構造函數下的component函數，便可定義組件。

語法：

Vue.component(組件名, 選項對象)

來定義一個下拉框組件：

Vue.component('custom-select', {
    template: `
        <div class="select">
            <p>請選擇：</p>
            <ul>
                <li>北京</li>
                <li>上海</li>
                <li>杭州</li>
            </ul>
        </div>
    `
})

組件的名字就爲custom-select，在模板中使用組件：

<div id="app">
    <custom-select></custom-select>
    <custom-select></custom-select>
</div>

<script>
    Vue.component('custom-select', {
        template: `
            <div class="select">
                <p>請選擇：</p>
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>杭州</li>
                </ul>
            </div>
        `
    })

    new Vue({
        el: '#app'
    })


</script>

在模板中使用組件和正常標籤同樣。