Vue父子组件复用deleteModal时子组件触发模态框父组件也响应如何解决

出现父子组件模态框同时触发的问题，核心原因是两个deleteModal实例的显隐控制逻辑没有完全隔离，常见场景如下：

• 子组件触发模态框的点击事件未阻止冒泡，事件向上传递到父组件的同名触发元素，导致父组件模态框也被触发
• deleteModal组件内部使用了全局事件总线、全局状态（Pinia/Vuex）控制显隐，两个实例监听了同一个全局变量，状态变更时同时响应
• 触发模态框时使用了跨层级的ref调用（比如$root.$refs.deleteModal、$parent.$refs.deleteModal），同时命中了父子组件内的同名ref实例

方案1：修复事件冒泡（成本最低） #

在子组件触发模态框的点击事件上添加.stop修饰符，阻止事件向上传递：

<!-- 子组件内的删除触发按钮 -->
<button @click.stop="openDeleteModal">删除</button>

方案2：改为受控组件（最稳定，推荐） #

将deleteModal改造为支持v-model的受控组件，显隐状态完全由各自的上层组件维护，从根源上隔离状态：

第一步：改造deleteModal组件支持双向绑定 #

<!-- deleteModal.vue （Vue3示例，Vue2写法逻辑一致） -->
<script setup>
const props = defineProps({
  visible: Boolean
})
const emit = defineEmits(['update:visible', 'deleteTriggerAPI'])

// 内部关闭模态框时调用
const handleClose = () => {
  emit('update:visible', false)
}
</script>
<template>
  <div v-if="visible" class="modal">
    <!-- 模态框内容 -->
    <button @click="handleClose">取消</button>
    <button @click="emit('deleteTriggerAPI')">确认删除</button>
  </div>
</template>

第二步：父子组件分别绑定独立的显隐状态 #

父组件修改：

<template>
  <div>
    <childCompt ref="childCompt" />
    <deleteModal
      v-model:visible="showParentDelete"
      @deleteTriggerAPI="deleteAPIParent"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const showParentDelete = ref(false)

// 父组件触发删除时直接修改自身状态即可
const handleParentDelete = () => {
  showParentDelete.value = true
}
</script>

子组件修改：

<template>
  <div>
    <deleteModal
      v-model:visible="showChildDelete"
      @deleteTriggerAPI="deleteAPIChild"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const showChildDelete = ref(false)

// 子组件触发删除时修改自身状态，完全不会影响父组件
const handleChildDelete = () => {
  showChildDelete.value = true
}
</script>

方案3：校验ref调用逻辑 #

如果坚持用ref调用模态框的open()方法，确保只调用当前组件作用域内的ref，不要添加$parent、$root等跨层级前缀，避免命中父组件的同名ref。

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