Vue组件实例独立状态管理指南

<template>
  <div class="container">
    <button @click="isActive = !isActive">Toggle All Popups</button>
    <!-- 第一个Popup实例 -->
    <popup class="contentbox" v-if="isActive" img="van.gif" @close="testEmit" />
    <!-- 第二个Popup实例 -->
    <popup class="contentbox2" v-if="isActive" img="yagi.png" @close="testEmit"> </popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true, // 单一状态变量
    };
  },
  methods: {
    testEmit() {
      this.isActive = !this.isActive; // 切换单一状态变量
      console.log('test');
    },
  },
};
</script>

<template>
  <div id="app">
    <div :class="theme" v-if="isActive">
      <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>
  </div>
</template>

<script>
export default {
  props: {
    mode: String,
    img: String,
    theme: String,
  },
  data() {
    return {
      isActive: true, // 子组件内部也维护一个isActive，但父组件的v-if优先级更高
    };
  },
  methods: {
    close() {
      // 这里的isActive是子组件内部的，但父组件的v-if才是决定渲染的关键
      this.$emit('close', this.isActive = !this.isActive);
    },
  },
};
</script>

<template>
  <div class="container">
    <!-- 独立的控制按钮示例 -->
    <button @click="popup1IsActive = !popup1IsActive">Toggle Popup 1</button>
    <button @click="popup2IsActive = !popup2IsActive">Toggle Popup 2</button>

    <!-- 第一个Popup实例，绑定到popup1IsActive -->
    <popup class="contentbox" v-if="popup1IsActive" img="van.gif" @close="closePopup1" />

    <!-- 第二个Popup实例，绑定到popup2IsActive -->
    <popup class="contentbox2" v-if="popup2IsActive" img="yagi.png" @close="closePopup2"> </popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popup1IsActive: true, // Popup 1 的独立状态
      popup2IsActive: true, // Popup 2 的独立状态
    };
  },
  methods: {
    closePopup1() {
      this.popup1IsActive = !this.popup1IsActive; // 仅切换 Popup 1 的状态
      console.log('Popup 1 closed');
    },
    closePopup2() {
      this.popup2IsActive = !this.popup2IsActive; // 仅切换 Popup 2 的状态
      console.log('Popup 2 closed');
    },
  },
};
</script>

<template>
  <div id="app">
    <!-- 使用isVisible prop控制显示，移除内部isActive数据 -->
    <div :class="theme" v-if="isVisible">
      <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>
  </div>
</template>

<script>
export default {
  props: {
    mode: String,
    img: String,
    theme: String,
    isVisible: Boolean, // 新增：从父组件接收显示状态
    componentId: String, // 新增：从父组件接收唯一标识符
  },
  // 移除内部的isActive数据，让父组件完全控制显示状态
  // data() { return { isActive: true }; },
  // methods: { close() { this.$emit('close', this.isActive = !this.isActive) } }
};
</script>

<template>
  <div class="container">
    <button @click="addPopup">Add New Popup</button>

    <!-- 使用v-for循环渲染Popup组件 -->
    <popup
      v-for="popupItem in popups"
      :key="popupItem.id"
      :class="popupItem.class"
      :img="popupItem.img"
      :theme="popupItem.theme"
      :isVisible="popupItem.isActive" <!-- 绑定到数组中每个对象的isActive -->
      :componentId="popupItem.id" <!-- 传递唯一标识符 -->
      @close="handlePopupClose" <!-- 通用的关闭处理函数 -->
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      popups: [
        { id: 'popup1', class: 'contentbox', img: 'van.gif', theme: 'default-theme', isActive: true },
        { id: 'popup2', class: 'contentbox2', img: 'yagi.png', theme: 'dark-theme', isActive: true },
      ],
      nextPopupId: 3, // 用于生成新的Popup ID
    };
  },
  methods: {
    handlePopupClose(componentId) {
      // 根据接收到的componentId找到对应的Popup实例并切换其isActive状态
      const index = this.popups.findIndex(p => p.id === componentId);
      if (index !== -1) {
        this.popups[index].isActive = !this.popups[index].isActive;
        console.log(`Popup ${componentId} state toggled.`);
      }
    },
    addPopup() {
      // 动态添加新的Popup实例
      const newId = `popup${this.nextPopupId++}`;
      this.popups.push({
        id: newId,
        class: `contentbox${this.nextPopupId - 1}`,
        img: 'new-image.png', // 示例图片
        theme: 'light-theme', // 示例主题
        isActive: true,
      });
      console.log(`New Popup ${newId} added.`);
    }
  },
};
</script>