Vue3递归组件拆分Transition组件后子评论不显示的修复方案

问题根源 #

抽离transition-group为独立组件后，原有的递归渲染逻辑被切断——之前CommentList会递归调用自身渲染子评论，现在过渡组件直接包裹CommentItem，但CommentItem内部的子评论没有关联到过渡组件的递归逻辑，导致子评论无法正常渲染。

解决方案 #

让过渡组件自身支持递归渲染，同时调整CommentItem预留子评论嵌入位置，具体实现如下：

1. 修改CommentListTransition组件，内置递归逻辑

组件内部不仅渲染当前层级的CommentItem，还要主动处理每个评论的子节点，递归调用自身渲染子评论：

<!-- CommentListTransition.vue -->
<template>
  <transition-group name="comment-list" tag="div" class="comment-list">
    <CommentItem
      v-for="comment in comments"
      :key="comment.id"
      :comment="comment"
    >
      <!-- 递归渲染子评论，直接调用当前过渡组件 -->
      <CommentListTransition 
        v-if="comment.children?.length" 
        :comments="comment.children" 
      />
    </CommentItem>
  </transition-group>
</template>

<script setup>
import CommentItem from './CommentItem.vue'

const props = defineProps({
  comments: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

<style scoped>
.comment-list {
  margin-top: 12px;
}

/* 过渡动画样式 */
.comment-list-enter-from,
.comment-list-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

.comment-list-enter-active,
.comment-list-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
</style>

2. 调整CommentItem组件，添加子评论插槽

在CommentItem中预留插槽，用于嵌入递归的过渡组件，保证子评论能正确挂载到父评论下方：

<!-- CommentItem.vue -->
<template>
  <div class="comment-item">
    <div class="comment-header">
      <span class="comment-author">{{ comment.author }}</span>
      <span class="comment-time">{{ comment.time }}</span>
    </div>
    <div class="comment-content">{{ comment.content }}</div>
    <!-- 子评论容器：如果有插槽内容（即子评论）则渲染 -->
    <div class="child-comments" v-if="$slots.default">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  comment: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.comment-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.child-comments {
  margin-left: 24px;
  margin-top: 12px;
}
</style>

3. 根组件调用方式

直接使用CommentListTransition渲染顶级评论列表即可，无需再嵌套原CommentList：

<!-- App.vue -->
<template>
  <div class="comment-wrapper">
    <h3>评论区</h3>
    <CommentListTransition :comments="commentList" />
  </div>
</template>

<script setup>
import CommentListTransition from './CommentListTransition.vue'

// 模拟层级评论数据
const commentList = [
  {
    id: 1,
    author: '用户A',
    time: '2024-05-20',
    content: '这是第一条父评论',
    children: [
      {
        id: 11,
        author: '用户B',
        time: '2024-05-20',
        content: '这是第一条子评论',
        children: []
      },
      {
        id: 12,
        author: '用户C',
        time: '2024-05-20',
        content: '这是第二条子评论',
        children: [
          {
            id: 121,
            author: '用户D',
            time: '2024-05-20',
            content: '这是孙评论',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    author: '用户E',
    time: '2024-05-21',
    content: '这是第二条父评论',
    children: []
  }
]
</script>

关键说明 #

• 必须给每个评论项设置唯一的:key，这是transition-group正常工作的核心要求，同时避免Vue列表渲染警告。
• 过渡组件自身递归调用，保证所有层级的评论都被transition-group包裹，既实现了过渡效果，又保留了递归结构。
• 通过CommentItem的插槽传递子评论的过渡组件，保证子评论的DOM结构正确嵌套在父评论下方。

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