vue3 slot默认值

在 Vue 3 中，`slot` 是用于组件复用和内容注入的重要特性。当没有提供特定的插槽内容时，可以设置插槽的默认值。默认插槽通常定义在组件模板中 `<template>` 标签下的 `default` 或者 `fallback` 属性上。

例如：

<template>
  <div>
    <!-- 如果父组件没有传递内容到 this.$slots.default，会显示 defaultSlotValue -->
    <slot name="default" :default="defaultSlotValue">
      <p>这是默认插槽的内容</p>
    </slot>
    <!-- 另外，如果没有传递任何插槽，fallbackSlotValue 也会生效 -->
    <slot fallback="fallbackSlotValue">
      <p>这是 fallback 插槽的内容</p>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSlotValue: '默认插槽的默认值',
      fallbackSlotValue: '如果没有任何插槽，显示这个内容',
    };
  },
};
</script>

使用 `v-slot` 或 `:`语法，你可以更精确地指定默认值：

<template>
  <div>
    <slot :default="{ text: '这是默认插槽的内容' }"></slot>
  </div>
</template>

在这里，如果父组件没有提供插槽内容，那么默认将插入一个包含 `text` 属性的对象。