![5de3b6fc07d13a53b7b684a999386b50.png](https://i-blog.csdnimg.cn/blog_migrate/0ba40ae1ef649e5ade3c74bb61f7e008.jpeg)
前些日子,在整理活动开发的项目时,同事说要不要写一些基础的class,例如某一块内容的居中,然后最后我还是说服了他使用vue插槽去做一个居中组件
这里还有一个话题了:vue项目中css的管理是使用scope还是规范class命名或者CSS Module????可以留言讨论一下,下篇文章讨论一下
这个讨论放在代码后面,下面先来看这个组件
插槽 — Vue.jscn.vuejs.org![e89bbef9c1c407697a838e32ec0f1115.png](https://i-blog.csdnimg.cn/blog_migrate/f9fe463fd9e39c8110b6a4d4863b6f96.jpeg)
直接上代码
组件:
<template>
<div class="center-box">
<slot name="header"></slot>
<div class="center-box-content">
<slot name="content"></slot>
</div>
<slot name="footer"></slot>
</div>
</template>
<script></script>
<style lang="less">
.center-box {
position: relative;
.center-box-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
使用:
省略了引用部分
<template>
<div id="app">
<CenterBox class="abc">
<div slot="header">11111</div>
<div slot="content">11222</div>
<div slot="footer">5555</div>
</CenterBox>
</div>
</template>
以上是最简单的使用,我们可以简单的理解为组件内预留了位置,在使用的时候使用一个标记slot来确定是哪个位置,肥肠的灵活
这里说一下我使用这种方式的初衷
想法很简单:并不是把相同的代码使用同一个class提取出来,而是把相同功能或者布局的模型做成组件,说白了是一个壳子;和大家整理基础组件是一个意思
欢迎大家留言