zui-svg-icon 可能在内部处理了点击事件,同时又向父组件 emit 了一个 click 事件。而在 workbench.vue 中,@click 是 v-on:click 的缩写。对于自定义组件,它默认监听的是组件 emit 出来的 click 事件。如果想监听原生 DOM 点击事件,需要使用 .native 修饰符,即 @click.native
因此,当在 zui-svg-icon 上使用 @click 时,它会监听自定义的 click 事件。如果 zui-svg-icon 内部的根元素也绑定了点击事件,并且该事件冒泡了,那么就会触发两次。但是,如果 zui-svg-icon 同时处理了原生点击事件和 emit 了 click 事件,那么直接使用 @click 就会导致两次触发。
为了解决这个问题,我将在 zui-svg-icon 的 @click 事件上添加 .native 修饰符,这样它就只会监听原生的点击事件,避免了组件内部 emit 事件可能导致的重复触发。