Vue中同一全局组件在父子组件使用时触发两次该如何解决？

• 点击事件冒泡：点击子组件的触发按钮时，click事件未阻止冒泡，会向上传递到父组件的点击监听区域，导致父组件的triggerModalParent也被执行，两个方法先后调用了Modal的show方法。
• 全局Modal组件为单例设计：多数全局弹窗组件封装时默认做成单例，全局仅保留一个实例，你在父子组件中分别声明的<Modal ref="modalA"/>和<Modal ref="modalB"/>本质上指向同一个实例，两次调用show方法会作用在同一个弹窗上，看起来像是被触发了两次。
• Modal组件自身逻辑问题：show方法内部存在重复绑定事件的逻辑，比如每次调用show都重复监听同一个全局事件，导致触发一次执行两次逻辑。

1 处理事件冒泡问题 #

修改子组件的点击事件，添加.stop修饰符阻止事件向上冒泡即可：

<!-- 子组件代码修改 -->
<div @click.stop="triggerModalChild()">
  Trigger Modal
</div>

修改后点击子组件的按钮时，click事件不会向上传递到父组件，父组件的触发方法不会被连带执行。

2 适配单例Modal组件 #

如果你的全局Modal本身是单例设计，不需要在父子组件中重复声明<Modal/>标签，统一在全局根组件声明一次即可：

1. 移除父组件和子组件中的<Modal ref="xxx"/>声明，在项目根组件App.vue中全局声明一次：

<!-- App.vue -->
<Modal ref="globalModal"/>

2. 封装全局调用方法挂载到Vue原型上（Vue2示例）：

// main.js中添加
Vue.prototype.$showModal = function(options) {
  this.$root.$refs.globalModal.show(options)
}

3. 父子组件直接调用全局方法即可，不需要各自维护ref：

// 父组件触发逻辑
triggerModalParent() {
  this.$showModal(/* 传入弹窗配置 */)
}
// 子组件触发逻辑
triggerModalChild() {
  this.$showModal(/* 传入弹窗配置 */)
}

如果不需要单例特性，也可以修改Modal组件的封装逻辑，去掉单例限制，支持多实例，每次调用<Modal/>都会生成独立实例，互不干扰。

3 排查Modal组件内部逻辑 #

检查Modal组件的show方法是否存在重复绑定事件、重复执行逻辑的问题，比如每次调用show都新增了一次相同的事件监听，没有做去重处理。

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