Vue3 中，如何在子组件间传递事件

最近勇哥在做一个基于知识库的 AI 应用，MVP 已经上线了。目前在做知识库的管理后台，方便产品运营人员上传文档。

知识库管理后台怎么快怎么来，选型是基于 Vue3 + Element Plus 的 vue-pure-admin。

vue-pure-admin 对 Element Plus 做了一层封装，做后台管理系统很方便，基本上开箱即用。

但是，一些交互还是要自己来实现的。

比如，大部分后台管理系统都有的一个功能：
在一个列表页面，头部有 “新增” 的操作，新增成功后，列表自动刷新，展示最新的数据。

Vue3 来实现这种交互，太丝滑了。只需要在父组件中定义刷新方法并传递给相关子组件就可以了。

该功能主要涉及到 3 个文件：

列表入口父组件 knowledge/index.vue
展示列表数据的子组件 knowledge/table/index.vue
新增功能的子组件 knowledge/dialog/dialog.vue

实现步骤如下：

在父组件中添加 ref 引用和刷新方法#

父组件 knowledge/index.vue 核心代码如下：

<script setup lang="ts">
import Search from "./form/search.vue";
import Table from "./table/index.vue";
import DialogForm from "./dialog/dialog.vue";
import { ref } from "vue";

const tableRef = ref();

// 定义刷新方法
const refreshTable = () => {
  tableRef.value?.refresh();
};

defineOptions({
  name: "KnowledgeIndex"
});
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center">
        <component :is="Search" class="flex-1" />
        <component :is="DialogForm" class="flex-none" @success="refreshTable" />
      </div>
    </template>
    <template #default>
      <component :is="Table" ref="tableRef" />
    </template>
  </el-card>
</template>

在展示数据的子组件中暴露刷新方法#

子组件 knowledge/table/index.vue 展示数据列表，，核心代码如下：

<script setup lang="ts">
const getDataList  = funciton (){
  // 获取列表数据的具体实现
  ...
};

// 暴露刷新方法给父组件
defineExpose({
  refresh: getDataList
});
</script>

在实现新增功能的子组件中添加成功时的触发事件#

子组件 knowledge/dialog/dialog.vue 实现弹窗表单，核心代码如下：

const emit = defineEmits(['success']);

const handleConfirm = async () => {
  const params = values.value as unknown as ParamsDatahub;
  const res = await saveKnowledgeDatahub(params);
  if (res.success) {
    visible.value = false;
    emit('success'); // 触发成功事件
  }
};