理解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>

在模板中使用组件和正常标签同样。