Vue 2迁移Vue 3时@click.native的兼容问题及解决方案

问题背景 #

从Vue 2迁移至Vue 3时，使用动态组件渲染SVG图标，仅@click.native能触发点击事件，但该语法已被废弃。尝试官方文档提供的方案后无效，为组件添加包裹元素会改变图标样式，当前项目使用vue/compat模式。

原实现代码 #

<template>
  <component
    v-bind="$attrs"
    :is="MyIcons[iconName]"
    @click.native="(event: Event) => emit('click', event)"
  />
</template>

最终解决代码 #

<script setup lang="ts">
import { ref } from 'vue';
import { useEventListener } from '@vueuse/core';

const element = ref<HTMLDivElement>();
const emit = defineEmits<{
  click: []
}>();

useEventListener(element, "click", (e) => {
  emit("click");
});
</script>

<template>
  <component
    v-bind="$attrs"
    :is="MyIcons[iconName]"
    ref="element"
  />
</template>

内容的提问来源于stack exchange，提问作者DiogoSilva