vue3 模块化开发

一、背景

在项目开发过程中，我们经常会遇到一些结构相似，具体内容不太一样的UI页面设计。此时，若每一个相似的UI页面都需要从0到1开发的话，容易造成重复开发，降低开发效率。因此，为了提升工作效率，我们一般会将结构相似的部分提炼出来，将其作为一个基础模块，然后再在这个基础模块之上实现一些个性化UI。

二、模块化开发

<!-- Son.vue  -->
<template>
    <div class="pop-header">
        <slot name="header"></slot>
    </div>
    <div class="pop-main">
        <slot name="content"></slot>
    </div>
    <div class="pop-footer">
        <slot name="footer"></slot>
    </div>
</template>
<script lang="ts" setup>
interface Props {
    /** 属性定义 */
}
defineProps<Props>();
const emits = defineEmits(['update:value'])
</script>
<style lang="less" scoped>
</style>

<!-- Father.vue -->
<template>
    <son>
        <template #header>
            <!-- 头部UI实现  -->
        <template>
        <template #content>
            <!-- 中间内容区UI实现 -->
        <template>
        <template #footer>
            <!-- 底部UI实现 -->
        <template>
    </son>
</template>
<script lang="ts" setup>
import Son from './Son.vue'
</script>
<style lang="less" scoped>
</style>