slot插槽封装公共组件

简化代码，封装公共组件

前言

项目中不可避免的有很多相同的组件，封装公共组件可以简化代码，提高开发效率，slot可以完美的实现封装

一、slot是什么？

slot卡槽可以分为具名卡槽和默认卡槽，默认卡槽直接写在组件内部并插入到内容区域

 

二、使用步骤

1.公共组件BaseCard封装

代码如下（示例）：

<template>
  <div :class="['base-card', cardType === 'sub' ? 'sub' : 'main']" :style="{ width, height }">
    <div class="card-top">
      <slot name="top-control"><span class="title">{{ title }}</span></slot>
    </div>
    <div class="content">
      <slot>内容</slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "base-card-2",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
    },
    title: {
      type: String,
      default: "标题",
    },
    cardType: {
      type: String,
      default: "main",
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["main", "sub"].includes(value);
      },
    },
  },
}
</script>

2.父组件引入

代码如下（示例）：

（1）默认卡槽的使用

<template>
  <BaseCard class="taxAnalysis-container" title="税务分析" cardType="sub">
  </BaseCard>
</template>
<script>
import BaseCard from "@/baseComponets/baseCard.vue";

（2）具名卡槽的使用

<template>
  <BaseCard class="taxAnalysis-container" title="税务分析" cardType="sub">
    <template #top-control>
      <div>头部企业排名</div>
      <el-select
        v-model="value"
        placeholder="选择时间"
        popper-class="select-popper-copy"
        style="margin-right:20px;"
      >
        <el-option label="500w以下" value="500万以下"></el-option>
      </el-select>
     </template>
  </BaseCard>
</template>
<script>
import BaseCard from "@/baseComponets/baseCard.vue";

总结

 这个例子组件默认卡槽时如下

但是组件有时又会有些许差异，比如会在最右边多一点东西，比如一个下拉框,这是就会使用具名卡槽