看了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>
在模板中使用组件和正常标签一样。