开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 30 天，点击查看活动详情

说点题外话

上三篇都在说插槽在选项式中的展示，这一篇说说组合式中插槽该怎么写

说正文

1. 默认插槽

在Vue3中，默认插槽是通过<slot></slot>标签实现的。默认插槽也可以设置一个名字，以便在父组件中使用具名插槽时进行区分。

这里App.vue作为父组件，Home.vue组件作为子组件

App.vue

<template>
  <div>
    <home>
      这是默认插槽内容
    </home>
    <home>
      <template #default>
        这是另一个默认插槽内容
      </template>
    </home>
  </div>
</template>

Home.vue

<template> 
    <div> 
        <slot></slot> 
    </div> 
</template>

在这个例子中，home组件定义了一个默认插槽，并在父组件中使用了两次。第一次使用时，直接在<home>标签中传递了文本内容，这个内容将作为默认插槽的内容渲染出来。第二次使用时，通过<template>标签的#default指令定义了一个默认插槽，并在<home>标签中使用。这两种方式都可以定义默认插槽的内容，但是在使用具名插槽时，第二种方式更为常见。

2. 具名插槽

具名插槽是通过<slot>标签的name属性来定义的。具名插槽允许我们在父组件中传递特定名称的内容到子组件中，并在子组件中使用这些内容。

例如，我们可以在子组件中定义一个名为header的具名插槽，并在父组件中传递一个名为header的内容：

App.vue

<template>
  <div>
    <home>
      <template #header>
        <h1>这是一个标题</h1>
      </template>
      <p>这是正文内容</p>
    </home>
  </div>
</template>

Home.vue

<template>
  <div>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

和vue3和解的Day30-未知

说点题外话

说正文

1. 默认插槽

2. 具名插槽

结束