Nuxt3中能否使用named slot？正确语法是什么？

完全可以在Nuxt3中使用具名插槽（named slot），你的思路没问题，但代码里有两处小问题需要修正，以下是正确的实现方式：

1. 正确的组件代码（Blue.vue） #

注意<slot name="title">需要闭合标签，避免DOM结构错误：

<template>
  <div>
    <button>
      <slot name="title"></slot>
    </button>
    <div>
      <slot name="content" />
    </div>
  </div>
</template>

2. 正确的调用语法 #

Vue3中使用具名插槽时，需要将插槽内容包裹在<template>标签中，并通过v-slot:插槽名或缩写#插槽名指定插槽：

<Blue>
  <template v-slot:title>
    <h1>Title of my article</h1>
  </template>
  <template #content> <!-- 这里使用缩写语法 -->
    <p>Read this interesting story</p>
  </template>
</Blue>

另外，如果你想给插槽设置默认内容，直接在组件的<slot>标签内写入即可，比如：

<slot name="title">默认标题</slot>

这样当父组件没有传入title插槽内容时，就会显示默认文本。

内容的提问来源于stack exchange，提问作者Boq7