Vue.js中独立管理多个组件实例状态的策略

<!-- 父组件示例（存在问题） -->
<template>
  <div class="container">
    <button @click="isActive = !isActive">Toggle All Popups</button>
    <popup class="contentbox" v-if="isActive" img="van.gif" @close="testEmit" />
    <popup class="contentbox2" v-if="isActive" img="yagi.png" @close="testEmit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true, // 单一状态控制所有弹窗
    };
  },
  methods: {
    testEmit() {
      this.isActive = !this.isActive; // 改变此状态会影响所有绑定的弹窗
      console.log('test');
    },
  },
};
</script>

<!-- 子组件示例（需要优化） -->
<template>
  <div :class="theme" v-if="localIsActive">
    <div class="headerbar">
      <div class="htitle"><h3>Title Goes Here</h3></div>
      <div @click="$emit('close')" class="xbutton"><h1>X</h1></div>
    </div>
    <div>
      @@##@@
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 应该通过props接收isActive，而不是在data中定义
    // isActive: Boolean, // 修正后应有此prop
    img: String,
    theme: String,
  },
  data() {
    return {
      // 不应在子组件内部维护 isActive 状态，除非它完全独立于父组件
      localIsActive: true, // 原始代码中的 isActive，此处为避免混淆更名为 localIsActive
    };
  },
  methods: {
    // 此方法在子组件中不应直接改变父组件的状态，而应通知父组件
    close() {
      // 原始代码中的 this.$emit('close', this.isActive = !this.isActive)
      // 这实际上改变了子组件内部的 isActive，但父组件仍需响应
      this.$emit('close'); // 仅触发关闭事件
    },
  },
};
</script>

<template>
  <!-- v-if 直接使用从父组件接收的 isActive prop -->
  <div :class="theme" v-if="isActive">
    <div class="headerbar">
      <div class="htitle"><h3>Title Goes Here</h3></div>
      <!-- 点击时只触发 'close' 事件，不关心具体如何关闭 -->
      <div @click="$emit('close')" class="xbutton"><h1>X</h1></div>
    </div>
    <div>
      @@##@@
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mode: {
      type: String,
      required: false,
      default: null,
    },
    img: String,
    theme: String,
    // 从父组件接收控制显示/隐藏的 isActive 状态
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  // 子组件不再维护内部的 isActive 状态
  // data() {
  //   return {
  //     // isActive: true,
  //   };
  // },
  // 子组件不再需要 close 方法，直接在模板中 $emit
  // methods: {
  //   close() {
  //     this.$emit('close');
  //   }
  // }
};
</script>

<style scoped>
/* 样式保持不变 */
</style>

<template>
  <div class="container">
    <div class="icon">
      <!-- 按钮1控制第一个弹窗 -->
      <button @click="isPopup1Active = !isPopup1Active">
        @@##@@
      </button>
    </div>

    <!-- 第一个 Popup 实例 -->
    <popup
      class="contentbox"
      :isActive="isPopup1Active"
      img="van.gif"
      @close="closePopup1"
    />

    <div class="profile">
      <!-- 按钮2控制第二个弹窗 -->
      <button @click="isPopup2Active = !isPopup2Active">
        @@##@@
      </button>
    </div>

    <!-- 第二个 Popup 实例 -->
    <popup
      class="contentbox2"
      :isActive="isPopup2Active"
      img="yagi.png"
      @close="closePopup2"
    />
  </div>
</template>

<script>
import Popup from './Popup.vue'; // 确保导入子组件

export default {
  components: {
    Popup,
  },
  data() {
    return {
      isPopup1Active: false, // 第一个弹窗的独立状态
      isPopup2Active: false, // 第二个弹窗的独立状态
    };
  },
  methods: {
    // 关闭第一个弹窗的方法
    closePopup1() {
      this.isPopup1Active = false;
      console.log('Popup 1 closed');
    },
    // 关闭第二个弹窗的方法
    closePopup2() {
      this.isPopup2Active = false;
      console.log('Popup 2 closed');
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
</style>

<template>
  <div :class="theme" v-if="isActive">
    <div class="headerbar">
      <div class="htitle"><h3>Title Goes Here</h3></div>
      <!-- 点击时触发 'close' 事件，并带上 componentId -->
      <div @click="$emit('close', componentId)" class="xbutton"><h1>X</h1></div>
    </div>
    <div>
      @@##@@
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mode: { type: String, default: null },
    img: String,
    theme: String,
    isActive: { type: Boolean, default: false },
    // 接收一个唯一的标识符
    componentId: { type: [String, Number], required: true },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
</style>

<template>
  <div class="container">
    <div class="icon">
      <button @click="togglePopup(0)">
        @@##@@
      </button>
    </div>

    <div class="profile">
      <button @click="togglePopup(1)">
        @@##@@
      </button>
    </div>

    <!-- 使用 v-for 动态渲染多个 Popup 实例 -->
    <popup
      v-for="(popupState, index) in popups"
      :key="popupState.id"
      :class="popupState.class"
      :isActive="popupState.isActive"
      :img="popupState.img"
      :componentId="popupState.id"
      @close="closePopup"
    />
  </div>
</template>

<script>
import Popup from './Popup.vue'; // 确保导入子组件

export default {
  components: {
    Popup,
  },
  data() {
    return {
      // 使用数组管理所有弹窗的状态
      popups: [
        { id: 'popup1', class: 'contentbox', img: 'van.gif', isActive: false },
        { id: 'popup2', class: 'contentbox2', img: 'yagi.png', isActive: false },
        // 可以根据需要添加更多弹窗
      ],
    };
  },
  methods: {
    // 切换指定索引弹窗的显示状态
    togglePopup(index) {
      if (this.popups[index]) {
        this.popups[index].isActive = !this.popups[index].isActive;
      }
    },
    // 根据 componentId 关闭对应的弹窗
    closePopup(componentId) {
      const popup = this.popups.find(p => p.id === componentId);
      if (popup) {
        popup.isActive = false;
        console.log(`Popup ${componentId} closed`);
      }
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
</style>