How to pass events between child components in Vue3

Recently, Yong has been working on an AI application based on a knowledge base, and the MVP has been launched. Currently, he is developing the management backend for the knowledge base to facilitate product operators in uploading documents.

The knowledge base management backend is built quickly using Vue3 + Element Plus with vue-pure-admin.

vue-pure-admin wraps Element Plus, making it very convenient for backend management systems, essentially ready to use out of the box.

However, some interactions still need to be implemented by oneself.

For example, a feature that most backend management systems have:
On a list page, there is an "Add" operation at the top, and after successfully adding, the list automatically refreshes to display the latest data.

Implementing this interaction with Vue3 is very smooth. You only need to define a refresh method in the parent component and pass it to the relevant child components.

This feature mainly involves three files:

List entry parent component knowledge/index.vue
Child component displaying list data knowledge/table/index.vue
Child component for the add feature knowledge/dialog/dialog.vue

The implementation steps are as follows:

Add ref reference and refresh method in the parent component#

The core code of the parent component knowledge/index.vue is as follows:

<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();

// Define refresh method
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>

Expose refresh method in the child component displaying data#

The core code of the child component knowledge/table/index.vue displaying the data list is as follows:

<script setup lang="ts">
const getDataList  = function (){
  // Specific implementation to get list data
  ...
};

// Expose refresh method to parent component
defineExpose({
  refresh: getDataList
});
</script>

Add trigger event on success in the child component implementing the add feature#

The core code of the child component knowledge/dialog/dialog.vue implementing the popup form is as follows:

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'); // Trigger success event
  }
};