Vue3组件的二次封装以及插槽、传值的使用

使用ElementUI的Card的组件的时候，很多地方都会用到卡片这个组件，以及修改一下他默认的样式，进行了二次的封装。
效果图如下：

这里封装主要是针对表格处理的，接收了一个标题参数,和2个具名插槽,一个是是否导出表格按钮，一个是表格内容。

子组件代码如下：

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span class="title">{{ props.title }}</span>
                <slot name="button"></slot>
            </div>
        </template>
        <slot name="table"></slot>
    </el-card>
</template>

<script lang="ts" setup>
let props = defineProps({
    title: {
        type: String,
        default: '这是标题'
    },
})
</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
}

:deep(.el-table .cell) {
    text-align: center;
}

.card-header .title {
    position: relative;
    color: #35a2ef;
    padding-left: 10px;
}

.card-header .title::after {
    content: "";
    display: block;
    width: 4px;
    height: 15px;
    background-color: #35a2ef;
    position: absolute;
    left: 0px;
    top: 5px;
}
</style>

父组件代码如下：

<template>
    <MyCart title="账号管理">
        <template #button>
            <el-button type="primary" @click="Table">
                导出表格<el-icon class="el-icon--right">
                    <Download />
                </el-icon>
            </el-button>
        </template>

        <template #table>
            <!-- v-slot:table -->
            <el-table :data="userList" border style="width: 100%">
                <el-table-column type="selection" prop="date" fixed />
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="userGroup" label="用户组" />
                <el-table-column prop="ctime" label="创建时间">
                    <template #default="props">
                        <span>{{ props.row.ctime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default>
                        <el-button link type="primary" size="small">编辑</el-button>
                        <el-button link type="primary" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </MyCart>
</template>

<script lang="ts" setup>
import MyCart from '../../components/MyCard.vue'
import * as XLSX from 'xlsx'//表格导入导出插件
import { ref, computed, reactive } from 'vue';
import { $_UsersList } from '../../apis/user'
interface user {
    "id": number,//账号ID
    "ctime": string,//用户名称
    "account": string,//注册时间
    "userGroup": string,//管理权限
    "imgUrl": string//头像地址
}

let userList = ref<Array<user>>([])
$_UsersList({
    currentPage: 1,
    pageSize: 10
}).then(res => {
    // 处理时间
    res.data.data.map((v: user) => {
        v.ctime = new Date(v.ctime).toLocaleString()
    });
    userList.value = res.data.data
})

let Table = () => {
    //1. 创建一个工作簿
    const workBook = XLSX.utils.book_new()
    // 2. 创建工作表 worksheet
    const workSheet = XLSX.utils.json_to_sheet(userList.value)
    // 3. 将工作表放入工作簿中
    XLSX.utils.book_append_sheet(workBook, workSheet)
    XLSX.writeFile(workBook, `账号列表.xlsx`, {
        bookType: 'xlsx'
    })
}
</script>

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

总结：

1.父传子使用的时候defineProps，在Vue3里面在setup下不需要引入就可以使用
例如：子组件接收参数

let props = defineProps({
    title: {
        type: String,
        default: '这是标题'
    },
})

父组件传递只需要这样：

 <MyCart title="传递的内容"> </MyCart>

2.具名插槽：如果需要插入内容的时候，并且想指定到某个位置需要给插槽定义名字。
例如：在组件通过name定义一个插槽名字为button，这个插槽放到上面位置，传过来的东西就会显示在什么地方，

<slot name="button"></slot>

父组件如下：在vue3里面需要使用template进行包裹 后面跟#定义的名字就可以，或者 v-slot:button 也可以

 <template #button>
    这里面是内容
 </template>

  <template v-slot:button>
    这里面是内容
 </template>