官网上已经有的内容,我就不再赘述了,直接在官网上查看即可,这里蚊子想换个角度来讲解下vue的组件。
组件,顾名思义,就是把一个相对独立,而且会多次使用的功能抽象出来,成为一个组件。如果我们要把某个功能抽象为一个组件时,要做到这个组件对其他人来说是个黑盒子,他们不用关心里面是怎么实现的,只需要根据约定的接口调用即可。
我用一张图稍微总结了下Vue中组件的构成:
可以看到组件中包含的东西还是蛮多的,而且,还有很多的点没有列出来,这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理,只讲使用。
我们以一个提示弹窗为例,来综合运用下组件的知识点.tips弹窗,几乎所有的框架或者类库,都会有弹窗这个组件,因为弹窗这个功能平时非常普遍,而且模块解耦度高!
<强> 1。接口约定
我们这里实现的弹窗,能用到的知识点有:道具、事件,槽,裁判等。这里我们也能看到各个知识点是怎么运用的。
/* *
*模态模态接口参数
* @param{字符串}模态。标题模态框标题
* @param{字符串}模态。文本模态框内容
* @param{布尔}模态。showbtn是否显示按钮
* @param{字符串}模态。btnText按钮文字
*/Vue.component(“技巧”,{
道具:[' tipsOptions '),
模板:“#技巧”,
数据(){
返回{
显示:假
}
}，
计算:{
小贴士:{
get () {
我们建议=ipsOptions | | {};
提示={
标题:技巧。标题| |”提示”,
文字:技巧。文本| |”,
showbtn:技巧。showbtn | |真的,
btnText:技巧。btnText | |”确定的
}；//console.log(建议);
返回提示;
}
}
}
}）
之前
<强> 2。模态组件的实现
提示组件相对来说实现的比较简单,仅用作提示用户的简单弹层。
模板:
& lt; div类="技巧" v-show=靶恪钡墓?巴噬北?
& lt; div类=皌ips-close @click”=癱loseTips”祝辞x
& lt; div类=皌ips-header”比;
& lt;槽name="头"比;
& lt; p类="标题"在{{tips.title}} & lt;/p>
& lt;/slot>
& lt;/div>
& lt; div类=皌ips-body”比;
& lt;槽name=吧硖濉北?
& lt; p类="通知"在{{tips.text}} & lt;/p>
& lt;/slot>
& lt;/div>
& lt; div类=皌ips-footer”比;
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=v=巴獠縩ofollow技巧。showbtn“@click=" yes "在{{tips.btnText}} & lt;/a>
& lt;/div>
& lt;/div>
之前
