出现 Extraneous children found when component already has explicitly named default slot 原理分析

前言

由于此类Bug比较简易简单，特此放置在前端专栏，主要是为了分析此类Bug的原理

1. 原理分析

在 Vue 3 中，插槽（slots）是组件中用于分发内容的机制，推荐阅读：详细分析Vue3中的卡槽知识点（附Demo）

插槽有默认插槽和具名插槽两种
在渲染组件时，Vue 期望插槽内容符合定义，如果组件中已经明确指定了“默认插槽”，并且你还传递了额外的子元素，那么 Vue 会报 Extraneous children found when component already has explicitly named default slot 错误，提示已经存在了默认插槽，不再接受其他多余的子内容

2. 解决方法

Demo 示例

以一个简单的 MyComponent 组件为例，该组件定义了具名插槽：

<template>
  <div>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot> <!-- 默认插槽 -->
    </div>
    <slot name="footer"></slot>
  </div>
</template>

使用错误的情况：

在使用该组件时，如果传递了错误的子内容，比如：

<MyComponent>
  <h1>Title</h1> <!-- 默认插槽的内容 -->
  <p>This is the main content</p>
  <footer>Footer content</footer>
</MyComponent>

因为 MyComponent 中已经定义了具名插槽 header 和 footer，但传递的 <h1> 和 <footer> 并没有放到具名插槽中，而是作为默认插槽的内容，Vue 会报错：Extraneous children found when component already has explicitly named default slot，并忽略这些内容

解决方案
要解决这个问题，需要确保插槽内容正确地传递到具名插槽中：

<MyComponent>
  <template #header>
    <h1>Title</h1>
  </template>
  <template #default>
    <p>This is the main content</p>
  </template>
  <template #footer>
    <footer>Footer content</footer>
  </template>
</MyComponent>

在此示例中，<h1> 放在了 #header 具名插槽中，<p> 放在了默认插槽中，<footer> 放在了 #footer 具名插槽中