分享记录vue3+ts基于element-plus通过父子组件交互实现聊天窗口的转发弹框，支持多选、单选、搜索等基础功能。开整

<template>
  <div class="chat-window">
    <!-- 父组件中的转发弹框 -->
    <forward-dialog
      ref="forwardDialogRef"
      :visible.sync="forwardDialogVisible"
      :message="selectedMessage"
      @confirm="handleForwardConfirm"
    />
    <!-- 子组件中的聊天信息列表 -->
    <message-list
      :messages="messages"
      @forward="handleForward"
    />
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ForwardDialog from './ForwardDialog.vue';
import MessageList from './MessageList.vue';
 
export default defineComponent({
  components: {
    ForwardDialog,
    MessageList
  },
  setup() {
    const forwardDialogRef = ref<InstanceType<typeof ForwardDialog>>();
    const forwardDialogVisible = ref(false);
    const selectedMessage = ref({} as Message); // 假设Message是定义的消息类型
 
    const messages = ref<Message[]>([
      // 初始消息列表
    ]);
 
    // 处理转发事件
    const handleForward = (message: Message) => {
      selectedMessage.value = message;
      forwardDialogVisible.value = true;
    };
 
    // 处理转发确认事件
    const handleForwardConfirm = (forwardToUsers: string[]) => {
      // 实现转发逻辑
    };
 
    return {
      forwardDialogRef,
      forwardDialogVisible,
      selectedMessage,
      messages,
      handleForward,
      handleForwardConfirm
    };
  }
});
</script>

这个示例展示了如何在Vue 3和TypeScript中创建一个简单的聊天窗口应用，其中包括父子组件之间的通信，以及如何实现转发功能。父组件中包含一个转发弹框，子组件中包含一个消息列表，点击列表中的转发按钮会触发弹框的显示。转发弹框确认后，父组件会处理转发逻辑。这个例子简洁明了，并且使用了现代前端开发的最佳实践。