翻译：Vue 检查 slot 是否为空

原文地址： Checking if a slot is empty in Vue

在我的 Vue 项目中，我最近需要检查一个插槽是否为空。这个用例是一个可以接受一些内容的插槽的组件，但它也可以在没有它的情况下工作。为此，我查阅了 Vue 文档并自己进行了一些实验，看看是否能让它工作，结果令我非常惊喜，这又是 Vue 框架内置的另一个非常有用的功能。

实际上可能有几个原因让你想要检查一个槽位是否为空，但可能最主要的原因是只有当槽位实际上被传递给组件时才这样做。

今天，我想与您分享这个有用的技巧，以便您可以在项目中开始使用它。

🟢 检查 Vue 中 slot 是否为空

为了实现它，你可以使用内置的 Vue 对象 $slots ，该对象总是由父组件传递。每个插槽都作为返回对应插槽名称键下数组 vnodes 的函数暴露 - 对于默认插槽，它将作为 $slots.default 访问，它是唯一的。

在以下示例中，只有当存在名为 header 的槽时， <header> 才会被渲染：

<template>
    <header v-if="$slots.header">
        <h1>My Awesome Heading</h1>
        <slot name="header" />
    </header>
</template>

通常您会直接在模板中使用插槽，但您也可以在 script 中使用插槽 - 您需要使用内置的 useSlots 可组合函数，它将返回 setupContext.slots 。

为了达到上述示例中类似的结果，我们需要以下代码：

<script setup lang="ts">
import { useSlots } from 'vue'

const slots = useSlots()
const shouldShowHeader = () => !!slots.header
</script>

<template>
    <header v-if="shouldShowHeader">
        <h1>My Awesome Heading</h1>
        <slot name="header" />
    </header>
</template>

如上例所示，在 Vue 中通过模板或脚本方式检查槽位是否为空真的非常简单 :)

✅ 摘要

干得好！你刚刚学会了如何在 Vue 中检查一个槽位是否为空。

请注意，下次再见！

And happy coding as always 🖥️