Vue组件独立状态管理：解决多实例联动问题

<template>
  <div class="container">
    <!-- 第一个弹窗的触发按钮 -->
    <button @click="isPopup1Active = !isPopup1Active">
      显示/隐藏弹窗1
    </button>
    <!-- 第二个弹窗的触发按钮 -->
    <button @click="isPopup2Active = !isPopup2Active">
      显示/隐藏弹窗2
    </button>

    <!-- 弹窗实例1 -->
    <PopupComponent
      class="contentbox"
      v-if="isPopup1Active"
      img="van.gif"
      @close="isPopup1Active = false"
    />

    <!-- 弹窗实例2 -->
    <PopupComponent
      class="contentbox2"
      v-if="isPopup2Active"
      img="yagi.png"
      @close="isPopup2Active = false"
    />
  </div>
</template>

<script>
import PopupComponent from './PopupComponent.vue'; // 假设你的弹窗组件名为PopupComponent

export default {
  components: {
    PopupComponent,
  },
  data() {
    return {
      isPopup1Active: false, // 独立控制弹窗1的状态
      isPopup2Active: false, // 独立控制弹窗2的状态
    };
  },
};
</script>

<template>
  <div class="container">
    <button @click="togglePopup('popup1')">显示/隐藏弹窗1</button>
    <button @click="togglePopup('popup2')">显示/隐藏弹窗2</button>

    <PopupComponent
      class="contentbox"
      v-if="popupStates.popup1"
      img="van.gif"
      @close="closePopup('popup1')"
    />
    <PopupComponent
      class="contentbox2"
      v-if="popupStates.popup2"
      img="yagi.png"
      @close="closePopup('popup2')"
    />
  </div>
</template>

<script>
import PopupComponent from './PopupComponent.vue';

export default {
  components: {
    PopupComponent,
  },
  data() {
    return {
      popupStates: {
        popup1: false,
        popup2: false,
      },
    };
  },
  methods: {
    togglePopup(id) {
      this.popupStates[id] = !this.popupStates[id];
    },
    closePopup(id) {
      this.popupStates[id] = false;
    },
  },
};
</script>

<template>
  <div class="container">
    <div v-for="popup in popups" :key="popup.id">
      <button @click="togglePopup(popup.id)">显示/隐藏 {{ popup.name }}</button>
      <PopupComponent
        :class="popup.class"
        v-if="popup.isActive"
        :img="popup.img"
        @close="closePopup(popup.id)"
      />
    </div>
  </div>
</template>

<script>
import PopupComponent from './PopupComponent.vue';

export default {
  components: {
    PopupComponent,
  },
  data() {
    return {
      popups: [
        { id: 'popup1', name: '弹窗1', class: 'contentbox', img: 'van.gif', isActive: false },
        { id: 'popup2', name: '弹窗2', class: 'contentbox2', img: 'yagi.png', isActive: false },
      ],
    };
  },
  methods: {
    togglePopup(id) {
      const index = this.popups.findIndex(p => p.id === id);
      if (index !== -1) {
        this.popups[index].isActive = !this.popups[index].isActive;
      }
    },
    closePopup(id) {
      const index = this.popups.findIndex(p => p.id === id);
      if (index !== -1) {
        this.popups[index].isActive = false;
      }
    },
  },
};
</script>

<!-- 父组件 -->
<PopupComponent @close="isPopup1Active = false" />
<PopupComponent @close="isPopup2Active = false" />