如何让两个Popup组件实例独立触发显隐事件，互不影响？

核心问题分析 #

你当前的问题根源是两个Popup组件共用了同一个isActive状态变量，无论哪个弹窗触发关闭事件，都会修改这个共享状态，导致两个弹窗同时关闭。不需要修改事件名称，只需给每个弹窗分配独立的状态变量即可实现独立控制。

具体修改步骤 #

1. 调整父组件的状态与逻辑 #

将原来单一的isActive拆分为两个独立状态，分别控制两个弹窗的显隐：

<template>
  <div class="container">
    <div class="icon">
      <!-- 可根据需求添加单独的打开按钮，或保留原有按钮并调整逻辑 -->
      <button @click="isPopup1Active = !isPopup1Active">打开弹窗1</button>
      <button @click="isPopup2Active = !isPopup2Active">打开弹窗2</button>
    </div>
    <div class="profile">
      <img src="/assets/images/yagihip.gif" alt="profile" />
    </div>
    <!-- 用独立状态控制每个弹窗的显隐，关闭事件直接修改对应状态 -->
    <popup class="contentbox" v-if="isPopup1Active" img="van.gif" @close="isPopup1Active = false" />
    <big-popup />
    <popup class="contentbox2" v-if="isPopup2Active" img="yagi.png" @close="isPopup2Active = false" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPopup1Active: true,
      isPopup2Active: true
    };
  }
};
</script>

2. 优化子组件Popup的逻辑 #

子组件无需自行维护isActive状态，显隐完全由父组件通过v-if控制，子组件只需负责触发关闭事件通知父组件：

<template>
  <div :class="theme">
    <div class="headerbar">
      <div class="htitle"><h3>Title Goes Here</h3></div>
      <div @click="$emit('close')" class="xbutton"><h1>X</h1></div>
    </div>
    <div>
      <img class="van" :src="`./assets/images/${img}`" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mode: {
      type: String,
      required: false,
      default: null,
    },
    img: String,
    theme: String
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
};
</script>

额外说明 #

• 无需修改事件名称，保持close事件即可，父组件绑定事件时直接修改对应弹窗的状态变量即可。
• 若后续需要管理更多弹窗，可改用对象存储状态（如popupStates: { popup1: true, popup2: true }），扩展性更强。

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