vue判断组件有没有传入的slot有就渲染slot没有就渲染内部节点

GPT4国内站点：海鲸AI

在 Vue 中，你可以使用 $slots 对象来检查是否有特定的插槽内容被传递给组件。Vue 3 中的 $slots 是一个对象，其中包含了所有插槽的引用。如果插槽没有内容，对应的插槽属性将会是 undefined。

下面是一个例子，演示了如果有传递插槽内容就渲染插槽，否则就渲染组件内部的默认内容：

<template>
  <div>
    <!-- 检查是否有名为 "default" 的插槽内容 -->
    <slot v-if="$slots.default"></slot>
    <!-- 如果没有，则显示默认内容 -->
    <div v-else>
      默认内容
    </div>
  </div>
</template>

<script>
export default {
  // 组件的其余部分
};
</script>

在这个例子中， 元素使用了 v-if 指令来判断是否存在默认插槽内容。如果 $slots.default 有值，说明父组件提供了默认插槽的内容，那么就会渲染这个插槽。如果没有值，就会渲染后面的

元素，显示“默认内容”。

如果你想要检查具名插槽，可以通过 $slots 对象中的对应属性名来检查。例如，如果你有一个名为 header 的插槽，可以这样检查：

<template>
  <div>
    <!-- 检查是否有名为 "header" 的插槽内容 -->
    <slot name="header" v-if="$slots.header"></slot>
    <!-- 如果没有，则显示默认标题 -->
    <h1 v-else>默认标题</h1>
  </div>
</template>

在 Vue 3 中，还可以使用 v-slot 的一种新语法来提供默认插槽内容，如下所示：

<template>
  <div>
    <slot name="header">
      <!-- 如果没有提供 "header" 插槽内容，将显示以下默认内容 -->
      <h1>默认标题</h1>
    </slot>
  </div>
</template>

在这种情况下，如果父组件没有提供 header 插槽的内容，将会显示

默认标题

。这种方法更为简洁，因为它不需要使用 v-if 或 v-else。