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  = function (){
  // 獲取列表數據的具體實現
  ...
};

// 暴露刷新方法給父組件
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'); // 觸發成功事件
  }
};