明白vue中的组件（一）

2019年8月25日 169次阅读 来源: 戎马

看了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>

在模板中运用组件和一般标签一样。

    原文作者：戎马
    原文地址: https://segmentfault.com/a/1190000009236700
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞