Vue评论嵌套通过作用域插槽传递层级数据，结合递归组件与具名插槽（#header/#body/#replies）实现模板按depth精准分发，并用maxDepth限制深度防爆栈。
Vue 组件插槽实现评论列表中“回复楼层”的嵌套模板分发，核心是用 作用域插槽（scoped slot） 传递每层评论数据，并结合递归组件或动态插槽名控制嵌套层级渲染逻辑。关键不在“多层插槽”，而在“按层级分发对应模板”。
用作用域插槽透传当前评论数据
父组件（如 <CommentList>）遍历评论数组，对每个 comment 渲染子项时，通过作用域插槽把该条评论及上下文（如层级 depth、是否为回复、父评论 id 等）传给子组件：
<CommentItem v-for="c in comments" :key="c.id" :comment="c">
<template #default="{ comment, depth }">
<div class="comment-body">{{ comment.content }}</div>
<div class="reply-trigger" @click="openReply(c.id)">回复</div>
</template>
</CommentItem>子组件 CommentItem 内部通过 <slot :comment="comment" :depth="depth"></slot> 触发内容分发，确保每一层都能拿到自己的数据和状态。
支持嵌套回复：用递归 + 插槽名区分模板类型
当一条评论有子回复（replies: []），需递归渲染。此时不能只靠默认插槽，应按用途定义多个具名插槽：
立即学习“前端免费学习笔记（深入）”；
-
#header：渲染头像、昵称、时间等基础信息 -
#body：渲染正文、操作按钮（点赞/回复） -
#replies：专门用于渲染子回复列表 —— 这里可再次嵌套<CommentItem>，并复用相同插槽结构
示例片段（在 CommentItem.vue 模板中）：
<!-- 当前评论主体 -->
<div class="comment-item" :class="{ 'is-reply': depth > 1 }">
<slot name="header" :comment="comment" :depth="depth" />
<slot name="body" :comment="comment" :depth="depth" />
<p><!-- 递归渲染子回复 -->
<div v-if="comment.replies?.length" class="replies">
<CommentItem
v-for="r in comment.replies"
:key="r.id"
:comment="r"
:depth="depth + 1"
>
<!-- 复用同一套插槽，但可针对 depth 做样式/行为差异化 -->
<template #header="slotProps">
<slot name="header" v-bind="slotProps" />
</template>
<template #body="slotProps">
<slot name="body" v-bind="slotProps" />
</template>
<template #replies="slotProps">
<slot name="replies" v-bind="slotProps" />
</template>
</CommentItem>
</div>
</div>动态插槽名适配不同场景（如“楼中楼”视觉样式）
若需为“第 2 层回复”显示「回复 @张三」前缀，或缩进、虚线边框等，可在父级调用时根据 depth 动态绑定插槽名：
<CommentItem :comment="c" :depth="1">
<!-- 主评论用 default -->
<template #default="props">
<CommentHeader :comment="props.comment" />
</template>
<p><!-- 第二层起用 reply-header，突出“回复”语义 -->
<template #reply-header="props">
<div class="reply-prefix">回复 @{{ props.comment.parentUser?.name }}：</div>
<CommentHeader :comment="props.comment" />
</template>
</CommentItem>子组件内配合判断：<slot :name="depth === 1 ? 'default' : 'reply-header'" :comment="comment" />，实现模板按层级精准分发。
避免递归爆栈：加深度限制与懒加载提示
真实场景中回复可能很深，需主动限制默认展开层级：
- 用
maxDepthprop 控制最多渲染几层，超出时显示「展开更多回复」按钮 - 点击后动态加载子回复或切换
showAll状态，再重新渲染 - 插槽中可通过
v-if="depth <= maxDepth || showAll"控制是否插入递归节点
这样既保持结构清晰，又防止无限嵌套导致性能或 UI 异常。
