VueJS 3中如何在组件外触发事件？删除后通知父组件刷新列表

数据老陈

2026-6-24

解决方案

你遇到的this未定义问题，是因为你使用了Vue3的组合式API（<script setup>语法），这种写法里不存在传统选项式API中的this上下文。要实现通知父组件刷新的需求，需要用Vue3提供的defineEmits来创建事件发射器：

步骤1：声明事件并获取发射器

在组件脚本顶部，用defineEmits声明要触发的事件，得到可直接调用的emit函数：

// <script setup>语法下无需导入，直接使用defineEmits
const emit = defineEmits(['refreshList'])

步骤2：替换`this.$emit`为`emit`调用

在删除成功的逻辑块中，把this.$emit('refreshList')替换为emit('refreshList')即可：

修改后的完整脚本代码：

const emit = defineEmits(['refreshList'])

const actionDelete = (id: string) => {
  $q.dialog({
    dark: true,
    title: 'Confirm',
    message: 'Do you really want to delete the image?',
    cancel: true,
    persistent: true
  })
    .onOk(async () => {
      const success = await mediaStore.deleteMediaItem(id)
      if(success) {
        $q.notify({
          message: 'Image has been deleted successfully',
          color: 'positive',
          position: 'bottom'
        })

        // 通知父组件刷新列表
        emit('refreshList')
      }
    })
    .onCancel(() => {
      $q.notify({
        message: 'Action Cancelled',
        color: 'negative',
        position: 'bottom',
      })
    })
}

补充说明

如果你的组件使用的是普通setup()函数（而非<script setup>），需要通过setup的第二个参数context获取emit：
```
export default {
  setup(props, context) {
    const emit = context.emit
    // ...其余业务逻辑
  }
}
```
父组件需正常监听refreshList事件，示例：
```
<MediaListComponent @refresh-list="handleRefreshData" />
```
（Vue事件名推荐用短横线分隔，驼峰式也可触发，但遵循规范更易维护）