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

说点题外话

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

说正文

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>

到这里我们发现组合式的默认插槽和具名插槽和目前没有差别。那么接着看作用域插槽

3. 作用域插槽

Vue 3 中的作用域插槽与 Vue 2 中的概念相同，都是用来将父组件中的数据传递到子组件中进行渲染的一种方式。不同之处在于 Vue 3 中的作用域插槽采用了新的语法和实现方式。

在 Vue 3 中，作用域插槽被称为“插槽 props”（Slot Props）。它通过在子组件中使用特殊的语法来定义插槽 props，将父组件中的数据传递到子组件中进行渲染。具体来说，可以使用 <slot> 标签，并在其上添加一个 v-bind 属性来指定插槽 props 的名称。

App.vue

<template>
  <my-component>
    <template #default="slotProps">
      <p>{{ slotProps.msg }}</p>
    </template>
  </my-component>
</template>

Home.ue

<template>
  <div>
    <slot :msg="myMsg"></slot>
  </div>
</template>


<script>
export default {
  setup(){
    const myMsg = ref("Hello World")
  }
}
</script>

在上面的示例中，父组件中通过使用 #default="slotProps" 的方式来指定插槽 props 的名称为 slotProps。在子组件中，使用 <slot> 标签并通过 :msg="myMsg" 的方式将 myMsg 数据传递到父组件中，从而在父组件中使用 slotProps.msg 来渲染数据。

需要注意的是，在 Vue 3 中，插槽 props 可以通过使用类似于解构赋值的语法来进行解构，以方便地访问其属性。例如，可以使用 #default="{ msg }" 的方式来将 slotProps.msg 解构为 msg，以方便在模板中使用。

和vue3和解的Day23--组合式插槽

说点题外话

说正文

1. 默认插槽

2. 具名插槽

3. 作用域插槽

结束