Vue插槽组件封装

组件封装:(通用A)标签+name

<template>
  <div>
    <el-card class="box-card">
      <!-- 卡片的头 -->
      <div slot="header" class="clearfix">
        <slot name="title"></slot>
      </div>
      <!-- 卡片的内容 -->
      <div>
        <slot name="container"></slot>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
</style>

接受的组件:(接受B) 标签+slot

<template>
  <div>
    <Card>
      <span slot="title">账号列表</span>
      <div slot="container">内容</div>
    </Card>
  </div>
</template>

<script>
import Card from "@/components/Card.vue";
export default {
  compenents: {
    Card,
  },
};
</script>

<style lang="less" scoped>
</style>
上一篇:Java实验四


下一篇:2021-01-01