vue3中计算属性与插槽配合的核心是用计算属性动态控制插槽渲染逻辑或传递加工数据：1. 通过计算属性决定是否渲染某插槽；2. 向作用域插槽传入预处理数据；3. 统一管理多插槽行为。
Vue3 的计算属性与插槽配合，核心在于用计算属性动态控制插槽内容的渲染逻辑或传递参数，而非直接“绑定插槽”。插槽本身是模板占位符，计算属性则提供响应式的数据/逻辑支撑，二者协同可让组件对外暴露更灵活、语义更清晰的配置能力。
用计算属性决定是否渲染某插槽
当组件需根据状态（如 loading、error、empty）切换不同插槽时，可将插槽名或是否启用该插槽的判断逻辑提取为计算属性：
// 子组件 MyList.vue
<template><div class="list">
<slot name="loading" v-if="showLoadingSlot"></slot><slot name="error" v-else-if="showErrorSlot"></slot><slot name="default" v-else-if="showDefaultSlot"></slot><slot name="empty" v-else></slot>
</div>
</template><script setup>
const props = defineProps({
items: Array,
loading: Boolean,
error: Error | null
})
const showLoadingSlot = computed(() => props.loading)
const showErrorSlot = computed(() => !props.loading && props.error)
const showDefaultSlot = computed(() => !props.loading && !props.error && props.items.length > 0)
const showEmptySlot = computed(() => !props.loading && !props.error && props.items.length === 0)
</script>
父组件只需按需提供对应 <template></template> 等插槽，无需手动维护 if/else 分支逻辑。
用计算属性向插槽作用域传入加工后的数据
插槽作用域（scoped slot）常用于将子组件内部数据“透传”给父组件定制渲染。计算属性可对原始数据做预处理，再通过 v-slot 暴露出去：
<template><ul>
<li v-for="item in processedItems" :key="item.id">
<slot :item="item" :formattedname="formattedName(item)" :isurgent="item.priority === 'high'">
{{ item.name }}
</slot>
</li>
</ul></template><script setup>
const props = defineProps({ items: Array })
// 原始数据加工 → 计算属性
const processedItems = computed(() =>
props.items.map(i => ({ ...i, updatedAt: new Date(i.updatedAt) }))
)
// 复杂格式化逻辑抽离为计算属性（便于复用和测试）
const formattedName = computed(() => (item) =>
`[${item.category}] ${item.name.trim()}`
)
</script>
这样父组件使用时可直接消费已加工结果：
<mylist :items="data"><template item formattedname isurgent><span :class="{ urgent: isUrgent }">{{ formattedName }}</span>
</template></mylist>
用计算属性组合多个插槽并统一控制行为
对于含多个功能插槽（如 header、footer、actions）的容器组件，可用计算属性统一管理它们的可见性、顺序或绑定属性：
- 定义
slotConfig计算属性，返回一个对象，描述每个插槽是否启用、是否需要额外 props、是否应包裹容器等 - 在模板中用
v-for遍历slotConfig，结合<slot></slot>和v-bind动态注入 props - 避免为每个插槽写独立的 v-if，提升可维护性
注意事项与避坑点
- 计算属性不能直接返回 JSX 或 VNode —— 插槽内容必须由模板结构定义，计算属性只负责“驱动”它
- 避免在计算属性中访问
$slots并做条件判断（如computed(() => $slots.header)），因为$slots是函数，且其存在性应在模板层用v-if="$slots.header"判断更稳妥 - 若需根据插槽内容反向影响子组件状态（例如：检测是否传了某个插槽来开启高级模式），建议用
defineExpose+onMounted配合$slots检查，而非依赖计算属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
