让slot组件更具有扩展性😍

[MrXiaoChuan]

// UiCrud.vue
<template>
    <div>
        <slot is="el-card" name="searchCard" title="标题">
            <template #default>
                <el-form />
            </template>
        </slot>

        <slot is="el-card" name="tableCard" title="标题">
            <template #default>
                <el-table />
            </template>
        </slot>
    </div>
</template>

// App.vue
<template>
    <UiCrud>
        <template ref="searchCardRef" shadow="always" #searchCard>
            <template #footer>
                <el-button type="primary">按钮</el-button>
            </template>
        </template>
        <template ref="tableCardRef" shadow="always" #tableCard>
            <template #footer>
                <el-button type="primary">按钮</el-button>
            </template>
        </template>
    </UiCrud>
</template>

扩展功能

1. 给slot定义is，让他从插槽变成一个代理， 支持代理attrs、slots、ref等；

优势

1. 防止组件多层嵌套时，子组件过多 存在相同属性名、插槽名，导致父组件暴露时需要重新定义新名称；
2. 直接定义ref获取子组件的暴露对象，无需父组件暴露子组件ref；
3. 避免父组件的属性和插槽一大堆，没有分组管理

[MrXiaoChuan]

为了实现这样的功能，我实现了替代品

缺点：需要父组件统一管理插巢

页面使用

代理的方式