20250417-vue-条件插槽

有时候我们需要根据内容是否被传入了插槽来渲染某些内容。

你可以结合使用 $slot 属性与 v-if 来实现。

在下面的示例中，我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。当 header、footer 或 default 的内容存在时，我们希望包装它以提供额外的样式：

子组件代码

<template><div class="card"><div v-if="$slots.header" class="card-header"><slot name="header" /></div><div v-if="$slots.default" class="card-content"><slot /></div><div v-if="$slots.footer" class="card-footer"><slot name="footer" /></div></div>
</template><style>.card {border: 1px solid black;padding: 0;}.card-header {background-color: skyblue;padding: 4px;}.card-content {padding: 4px;}.card-footer {background-color: lightgray;padding: 4px;}</style>

父组件代码

<template><Card><template #header><h1>标题</h1></template><template #default><p>内容</p></template><template #footer><em>底部</em></template></Card>
</template><script setup>import Card from './Card.vue'
</script>