Element Plus 组件封装中事件重复触发问题解析

问题现象

在基于 Element Plus 的 el-button 组件进行二次封装时，开发者发现点击事件会被触发两次。具体表现为：当封装后的按钮组件接收一个返回 Promise 的点击事件处理函数时，控制台会打印出两次日志，而预期应该是只触发一次。

问题根源

这个问题的本质在于 Vue 3 的事件处理机制与组件属性传递的交互方式。当开发者使用 v-bind="$attrs" 将父组件传递的所有属性绑定到子组件时，实际上同时传递了两个事件监听器：

1. 通过 @click 绑定的原生事件监听器
2. 通过 props 传递的 onClick 处理函数

在 Vue 3 中，@click 语法糖会被编译为 onClick 属性，这与直接通过 props 定义的 onClick 处理函数产生了冲突，导致事件被重复触发。

技术背景

Vue 3 的 RFC0008 规范中明确规定：任何以 "on" 开头且后跟大写字母的 props 默认会被视为事件监听器。这意味着：

• @click 会被编译为 onClick 属性
• 直接传递的 onClick 函数也会被识别为事件监听器
• 当两者同时存在时，就会产生事件监听器的重复绑定

解决方案

推荐方案：明确区分 props 和事件

最佳实践是将事件处理函数明确声明为 props，而不是通过 $attrs 自动传递：

<template>
  <el-button v-bind="filteredAttrs" :loading="loading" @click="handleClick">
    <slot></slot>
  </el-button>
</template>

<script setup>
import { ref, computed, useAttrs } from 'vue'

const props = defineProps({
  onClick: Function
})

const loading = ref(false)
const attrs = useAttrs()

// 过滤掉 onClick 属性，避免重复绑定
const filteredAttrs = computed(() => {
  const { onClick, ...rest } = attrs
  return rest
})

const handleClick = async () => {
  if (!props.onClick) return
  loading.value = true
  try {
    await props.onClick()
  } finally {
    loading.value = false
  }
}
</script>

替代方案：使用事件修饰符

如果确实需要保留通过 @click 传递事件的方式，可以使用 .once 修饰符确保事件只触发一次：

<template>
  <el-button v-bind="$attrs" :loading="loading" @click.once="handleClick">
    <slot></slot>
  </el-button>
</template>

深入理解

这个问题的本质反映了 Vue 组件设计中一个重要原则：明确的数据流。在组件封装时，应该：

1. 明确声明组件接收的 props
2. 明确区分哪些是组件属性，哪些是事件监听器
3. 避免过度依赖自动属性传递机制

通过这种方式封装的组件不仅行为更加可预测，而且类型提示和文档生成也会更加准确。

总结

在 Element Plus 组件封装过程中，特别是涉及事件处理时，开发者需要注意 Vue 3 的事件编译机制。通过明确声明 props 和合理使用属性传递，可以避免事件重复触发等问题，构建出更加健壮的组件。记住：清晰的接口定义是高质量组件的基础。