Vue3聊天功能的组件实现

Vue3聊天功能的组件可以使用Vue3的组件系统来实现。下面是一个简单的实现：

1. 创建一个名为Chat的组件，包含一个显示聊天记录的div和一个输入框。

<template>
  <div>
    <div class="chat-records">
      <!-- 显示聊天记录的div -->
    </div>
    <div class="chat-input">
      <input type="text" v-model="message" @keyup.enter="sendMessage">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Chat',
  setup() {
    const message = ref('')
    
    // 发送消息的方法
    const sendMessage = () => {
      // TODO: 实现发送消息的逻辑
    }
    
    return {
      message,
      sendMessage
    }
  }
}
</script>

2. 在聊天记录div中显示聊天记录。

<div class="chat-records">
  <div v-for="record in records" :key="record.id" class="chat-record">
    <div class="record-time">{{ record.time }}</div>
    <div class="record-content">{{ record.content }}</div>
  </div>
</div>

在setup函数中，我们需要使用ref来创建一个名为records的响应式数据，用于存放聊天记录。我们还需要在sendMessage方法中将新的聊天记录添加到records中。

setup() {
  const message = ref('')
  const records = ref([])

  const sendMessage = () => {
    if (message.value) {
      const record = {
        id: Date.now(),
        time: new Date().toLocaleTimeString(),
        content: message.value
      }
      records.value.push(record)
      message.value = ''
    }
  }

  return {
    message,
    records,
    sendMessage
  }
}

3. 实现发送消息的逻辑。

在sendMessage方法中，我们首先检查message的值是否为空，如果不为空，则创建一个新的聊天记录对象，包含id、time和content属性。id可以使用当前时间的毫秒数来生成，time可以使用toLocaleTimeString方法来获取当前时间的字符串表示。然后将新的聊天记录对象添加到records中，并清空message的值。

4. 添加样式。

最后，我们需要为Chat组件添加一些样式，使其看起来更像一个聊天窗口。这里只提供一个简单的样式示例：

.chat-records {
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}

.chat-record {
  margin-bottom: 10px;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-content {
  font-size: 16px;
}

.chat-input {
  margin-top: 10px;
}

.chat-input input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

这样，一个简单的Vue3聊天功能的组件就完成了。当然，实际的聊天功能可能会更加复杂，需要考虑更多的业务逻辑和用户体验。