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 核心代码如下：

Copy

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"
});



<el-card shadow="never">


<component :is="Search" class="flex-1" />
<component :is="DialogForm" class="flex-none" @success="refreshTable" />



<component :is="Table" ref="tableRef" />

</el-card>


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

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

Copy

const getDataList = funciton (){
// 获取列表数据的具体实现
...
};

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


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

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

Copy
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'); // 触发成功事件
}
};