vue slot插槽_vue居中盒子组件，学习插槽的简单用法（slot)

前些日子，在整理活动开发的项目时，同事说要不要写一些基础的class，例如某一块内容的居中，然后最后我还是说服了他使用vue插槽去做一个居中组件

这里还有一个话题了：vue项目中css的管理是使用scope还是规范class命名或者CSS Module？？？？可以留言讨论一下，下篇文章讨论一下

这个讨论放在代码后面，下面先来看这个组件

插槽 — Vue.js​cn.vuejs.org

直接上代码

组件：

<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提取出来，而是把相同功能或者布局的模型做成组件，说白了是一个壳子；和大家整理基础组件是一个意思

欢迎大家留言