让slot组件更具有扩展性😍 #13334

MrXiaoChuan · 2025-05-16T04:03:13Z

MrXiaoChuan
May 16, 2025

// 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>

扩展功能

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

优势

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

MrXiaoChuan · 2025-05-16T07:03:51Z

MrXiaoChuan
May 16, 2025
Author

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

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

页面使用

代理的方式

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

让slot组件更具有扩展性😍 #13334

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Vue

让slot组件更具有扩展性😍 #13334

MrXiaoChuan May 16, 2025

Replies: 1 comment

MrXiaoChuan May 16, 2025 Author

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

MrXiaoChuan
May 16, 2025

MrXiaoChuan
May 16, 2025
Author