Vue 开发小 Q 聊天机器人（三）构建对话模块

2024-02-14 06:10:28

导语

敬请关注本系列的第三篇文章。我们将继续构建小 Q 聊天机器人的对话模块，并探索在 Vue 中实现聊天机器人的新篇章。

正文

在开始之前，我们需要先复习一下前面已经完成的工作。我们已经成功地创建了 Chat 组件，它包含了整个聊天的界面。我们还创建了一个 ConversationItem 组件，用于显示对话中的每一项。现在，我们将把这些组件组合起来，让小 Q 开始与用户对话。

首先，我们需要在 Chat 组件中添加一个 ConversationList 组件。这个组件将包含所有对话项的列表。我们可以使用 v-for 指令来遍历对话项并渲染它们。

<template>
  <div class="chat">
    <ConversationList :conversations="conversations" />
    <Input @send="send" />
  </div>
</template>

<script>
import ConversationList from './ConversationList.vue';
import Input from './Input.vue';

export default {
  components: {
    ConversationList,
    Input,
  },
  data() {
    return {
      conversations: [],
    };
  },
  methods: {
    send(text) {
      this.conversations.push({
        isBot: false,
        text,
      });

      // Send the message to the bot
      this.$emit('send', text);
    },
  },
};
</script>

然后，我们需要在 ConversationList 组件中添加 ConversationItem 组件。这个组件将用于显示对话中的每一项。

<template>
  <div class="conversation-list">
    <ConversationItem v-for="conversation in conversations" :conversation="conversation" />
  </div>
</template>

<script>
import ConversationItem from './ConversationItem.vue';

export default {
  components: {
    ConversationItem,
  },
  props: {
    conversations: {
      type: Array,
      required: true,
    },
  },
};
</script>

最后，我们需要创建一个 Input 组件，允许用户输入消息并发送。

<template>
  <div class="input">
    <input type="text" @keyup.enter="send" v-model="text" />
    <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    send() {
      this.$emit('send', this.text);
      this.text = '';
    },
  },
};
</script>