官网上已经有的内容,我就不再赘述了,直接在官网上查看即可,这里蚊子想换个角度来讲解下vue的组件。
组件,顾名思义,就是把一个相对独立,而且会多次使用的功能抽象出来,成为一个组件!如果我们要把某个功能抽象为一个组件时,要做到这个组件对其他人来说是个黑盒子,他们不用关心里面是怎么实现的,只需要根据约定的接口调用即可!
我用一张图稍微总结了下Vue中组件的构成:
可以看到组件中包含的东西还是蛮多的,而且,还有很多的点没有列出来,这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理,只讲使用。
我们以一个tips弹窗为例,来综合运用下组件的知识点。tips弹窗,几乎所有的框架或者类库,都会有弹窗这个组件,因为弹窗这个功能平时非常普遍,而且模块解耦度高!
1. 接口约定
我们这里实现的弹窗,能用到的知识点有:props, event, slot, ref等。这里我们也能看到各个知识点是怎么运用的。
/** * modal 模态接口参数 * @param {string} modal.title 模态框标题 * @param {string} modal.text 模态框内容 * @param {boolean} modal.showbtn 是否显示按钮 * @param {string} modal.btnText 按钮文字 */ Vue.component('tips', { props : ['tipsOptions'], template : '#tips', data(){ return{ show : false } }, computed:{ tips : { get() { let tips = this.tipsOptions || {}; tips = { title: tips.title || '提示', text: tips.text || '', showbtn : tips.showbtn || true, btnText : tips.btnText || '确定' }; // console.log(tips); return tips; } } } })
2. modal组件的实现
tips组件相对来说实现的比较简单,仅用作提示用户的简单弹层。
模板:
<div class="tips" v-show="show" transition="fade"> <div class="tips-close" @click="closeTips">x</div> <div class="tips-header"> <slot name="header"> <p class="title">{{tips.title}}</p> </slot> </div> <div class="tips-body"> <slot name="body"> <p class="notice">{{tips.text}}</p> </slot> </div> <div class="tips-footer"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a> </div> </div>
模板中将结构分成了三部分,标题、内容和操作区域。这里既可以使用props传递字符串,也可以使用slot进行定制。