---
name: arco-vue-comment
description: "Arco Design Vue 评论 Comment 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-comment>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---

# 评论 Comment

## 简介

一个基本的评论组件，带有作者、头像、时间和操作。

## 基本用法

```vue
<template>
  <a-comment
    author="Socrates"
    content="Comment body content."
    datetime="1 hour"
  >
    <template #actions>
      <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }" />
        </span>
        <span v-else>
          <IconHeart />
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
      <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }" />
        </span>
        <span v-else>
          <IconStar />
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>
      <span class="action" key="reply">
        <IconMessage /> Reply
      </span>
    </template>
    <template #avatar>
      <a-avatar>
        <img
          alt="avatar"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        />
      </a-avatar>
    </template>
  </a-comment>
</template>

<script>
import { ref } from 'vue';
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from '@arco-design/web-vue/es/icon';

export default {
  components: {
    IconHeart,
    IconMessage,
    IconStar,
    IconStarFill,
    IconHeartFill,
  },
  setup() {
    const like = ref(false);
    const star = ref(false);
    const onLikeChange = () => {
      like.value = !like.value;
    };
    const onStarChange = () => {
      star.value = !star.value;
    };

    return {
      like,
      star,
      onLikeChange,
      onStarChange
    }
  },
};
</script>
<style scoped>
.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.action:hover {
  background: var(--color-fill-3);
}
</style>
```

## API

### `<comment>` 属性

|参数名|描述|类型|默认值|
|---|---|---|:---:|
|author|作者名|`string`|`-`|
|avatar|头像|`string`|`-`|
|content|评论内容|`string`|`-`|
|datetime|时间描述|`string`|`-`|
|align|靠左/靠右 展示 datetime 和 actions|`'left' \| 'right' \| { datetime?: "left" \| "right"; actions?: "left" \| "right" }`|`'left'`|

### `<comment>` 插槽

|插槽名|描述|参数|
|---|:---:|---|
|avatar|头像|-|
|author|作者|-|
|datetime|时间描述|-|
|content|评论内容|-|
|actions|操作列表|-|

## 常用模式

- **对齐**：通过 `align` 属性可以设置 `datetime` 和 `actions` 的对齐方式.
- **嵌套评论**：评论可以嵌套使用
- **回复框**：评论框配合回复框使用

## 最佳实践

- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。