vue3--基于setup标签的组件封装

背景

    最近的新需求需要增加一个页面，其结构和之前开发的页面差不多，当时虽然也对每一列进行了抽离，但是不够彻底，还是与业务紧耦合的，鉴于时间比较充分且抱着学习setup标签使用的态度，故而重新进行抽离设计

知识点

    defineEmits、defineProps、reactive、useSlots、onMounted、defineExpose、ref

思路梳理

    提取scroll组件只用于处理分页、暂无数据和点击高亮

    在scroll组件上封装train组件，用于处理弹窗业务

    在业务组件中通过插槽将左侧文字和右侧按钮透传下去

代码实现

    scroll

        对data数组传入的值做约束，要求必须包含id属性以避免渲染出错和处理点击高亮    

        利用element-plus的el-scrollbar组件做分页处理，并对外抛出分页请求

        预留插槽，等待外部传入渲染

    train

        数据获取

            定义api属性，从外部取回数据

            在分页和onMounted时进行调用

        弹窗处理

            将弹窗的响应对外抛出

            由于emit不支持返回值，故需要defineExpose将对应的内部函数对外抛出，比如，在外部处理完确认新增后关闭弹窗

        插槽转发

            使用useSlots获取插槽内容

            配合v-for将插槽转发给scroll组件

    业务逻辑

        通过template给对应的插槽填入内容并获取当前行的data数据

        利用ref获取在train中通过defineExpose出的接口，并在合适的时机做调用