vue3 slot设置认值

在 Vue.js 3 中，`slot` 是一种组件化的强大工具，它允许你在父组件中定义一个区域，让子组件通过插槽（`<template>` 标签）来传递内容。`v-slot` 是 Vue 3 对 `slot` 的一种更简洁的写法，用于设置默认插槽或命名插槽的绑定。

当你想给 `slot` 设置一个值（通常是一个数据属性或者计算结果），你可以这样做：

1. **默认插槽** (无名称): 如果你想让子组件提供任何内容都可以填入这个位置，可以在父组件的模板里使用 `<div v-slot="{ props }">...</div>`，然后在子组件的插槽中直接使用 `props` 对象。

<!-- 父组件 -->
<Parent>
  <Child> <!-- 可以填写任何内容 -->
    <template #default>我来自父组件</template>
  </Child>
</Parent>

<!-- 子组件 -->
<template>
  <div v-bind="$attrs" v-slot="{ props }">
    <slot v-if="props.showMe">{{ props.value }}</slot>
    <span v-else>默认显示内容</span>
  </div>
</template>

在这个例子中，如果 `showMe` 属性为 `true`，则显示 `props.value`，否则显示默认内容。

2. **命名插槽**: 你可以为插槽命名，并通过 `v-slot` 绑定数据。例如：

<!-- 父组件 -->
<Parent>
  <Child>
    <template #customSlot>
      <h2>自定义标题</h2>
      <p>这是来自子组件的内容</p>
    </template>
  </Child>
</Parent>

<!-- 子组件 -->
<template>
  <div>
    <slot name="customSlot">没有内容时显示默认信息</slot>
  </div>
</template>

子组件提供了 `customSlot` 插槽，父组件可以通过 `name` 属性指定插入哪个插槽。

相关问题:
1. 如何在 Vue 3 中定义和使用默认插槽？
2.