Vue3 二次封装button 组件点击事件出现两次提交,怎么避免

在Vue3中，如果你发现按钮组件点击事件触发了两次，可能是由于组件内部存在某个地方无意间注册了两个点击事件处理器，或者是外部父组件通过`v-model`或者自定义指令绑定了点击事件，导致的事件回调被执行了两次。

以下是几种常见的解决策略：

1. **检查模板绑定**：确认在template中是否有多次绑定了相同的点击事件。确保只有一处使用了`@click`或`@native-click`监听按钮的点击事件。

<!-- 只保留一处 -->
<button @click="handleButtonClick">...</button>

2. **避免在setup阶段多次注册事件**：在`setup`函数中，如果手动注册事件，确保只注册一次。

// 避免重复注册
const handleClick = () => {
  // ...
};

setup() {
  onMounted(() => {
    document.addEventListener('click', handleButtonClick);
  });
  onBeforeUnmount(() => {
    document.removeEventListener('click', handleButtonClick);
  });

  return {};
}

3. **检查是否有其他指令影响**：查看是否有使用如`v-model`、`v-once`或其他指令意外触发了点击事件。

4. **确保props或emit正确使用**：如果是组件间的通信，检查prop传递或自定义事件emitted时是否正确处理。

5. **复现并检查代码**：在最小化可复现的代码示例中查找问题，以便更精确地定位问题所在。

如果以上步骤都排查过了还是无法解决，可以贴出相关的代码片段以供分析。