官网上已经有的内容，我就不再赘述了，直接在官网上查看即可，这里蚊子想换个角度来讲解下vue的组件。
组件，顾名思义，就是把一个相对独立，而且会多次使用的功能抽象出来，成为一个组件！如果我们要把某个功能抽象为一个组件时，要做到这个组件对其他人来说是个黑盒子，他们不用关心里面是怎么实现的，只需要根据约定的接口调用即可！
我用一张图稍微总结了下Vue中组件的构成：
可以看到组件中包含的东西还是蛮多的，而且，还有很多的点没有列出来，这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理，只讲使用。
我们以一个tips弹窗为例，来综合运用下组件的知识点。tips弹窗，几乎所有的框架或者类库，都会有弹窗这个组件，因为弹窗这个功能平时非常普遍，而且模块解耦度高！
1. 接口约定
我们这里实现的弹窗，能用到的知识点有：props,event,slot,ref等。这里我们也能看到各个知识点是怎么运用的。
标题
* @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组件相对来说实现的比较简单，仅用作提示用户的简单弹层。
模板：
