Vue作用域插槽支持对象解构赋值，可直接在v-slot中解构传入的props，如v-slot:default="{ user, loading }"，并支持默认值、重命名及嵌套解构，Vue 3还支持#default简写。
在 Vue 的作用域插槽（scoped slot）中，可以直接对传入的插槽属性使用解构赋值，让模板更清晰、逻辑更聚焦。Vue 2.6+ 和 Vue 3 都支持这种写法，关键是把 v-slot 指令的参数写成对象解构形式。
基础语法：用对象解构接收插槽 props
作用域插槽默认会把数据以一个对象形式传入，传统写法是：
<template v-slot:default="slotProps">{{ slotProps.user.name }}
</template>
但你可以直接解构这个对象：
<template v-slot:default="{ user, loading }">{{ user.name }}
{{ loading ? '加载中...' : '' }}
</template>
这样省去了中间变量，也避免了重复访问 slotProps.xxx。
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
支持默认值和重命名，提升健壮性
解构时可像普通 JS 一样设置默认值或别名，应对插槽未传参或字段名不直观的情况：
-
设默认值：防止因父组件未传某字段导致报错，如
{ user = {}, id: userId = 1 } -
重命名字段：比如父组件传的是
itemData，你可在插槽里解构成item，提升可读性：{ itemData: item } -
解构嵌套对象：若传入的是
{ meta: { title, type } }，可直接写{ meta: { title, type } }
配合 v-for 或条件渲染，保持语义简洁
当插槽内容需要循环或判断时，解构后代码依然干净：
<template v-slot:items="{ list, onItemClick }"><div v-for="item in list" :key="item.id"
@click="onItemClick(item)">
{{ item.label }}
</div>
</template>
注意：不要在解构中调用函数（如 { onClick() {} }），那会创建新函数实例，可能影响响应式或性能；应直接解构方法名并原样使用。
Vue 3 中的 shorthand 写法更进一步
Vue 3 支持 # 简写，且解构可直接跟在后面：
<img :src="avatar" />
<span>{{ user.name }}</span>
</MyList>
如果只用一个字段，甚至可以简写为 #default="{ user }"，无需额外声明整个对象变量。
