Нужно закрыть один попап при открытии другого, как сделать?

В Vue.js можно закрыть один попап при открытии другого, используя компоненты и взаимодействие между ними через события.

Для начала создайте два компонента для попапов: Popup1 и Popup2. Компонент Popup1 будет содержать кнопку для открытия Popup2, а также свой собственный контент. Компонент Popup2 будет содержать кнопку для закрытия себя, а также свой собственный контент.

Расположите эти компоненты на странице или в других компонентах.

В компоненте Popup1 создайте метод-обработчик, который будет отлавливать событие открытия Popup2 и закрывать Popup1. Назовем этот метод closePopup1.

<template>
  <div>
    <button @click="openPopup2">Open Popup2</button>
    <div v-if="showPopup1">
      <h2>Popup1</h2>
      <!-- Содержимое Popup1 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup1: true,
    };
  },
  methods: {
    openPopup2() {
      this.showPopup1 = false;
    },
  },
};
</script>

В компоненте Popup2 создайте метод-обработчик, который будет отлавливать событие закрытия Popup2 и отправлять событие открытия Popup1. Назовем этот метод closePopup2.

<template>
  <div>
    <button @click="closePopup2">Close Popup2</button>
    <div v-if="showPopup2">
      <h2>Popup2</h2>
      <!-- Содержимое Popup2 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup2: true,
    };
  },
  methods: {
    closePopup2() {
      this.showPopup2 = false;
      this.$emit('openPopup1');
    },
  },
};
</script>

В родительском компоненте или в экземпляре Vue.js создайте метод-обработчик, который будет обрабатывать событие открытия Popup1 и закрывать Popup2. Назовем этот метод openPopup1.

<template>
  <div>
    <popup1 @openPopup1="closePopup2"></popup1>
    <popup2></popup2>
  </div>
</template>

<script>
import Popup1 from './Popup1.vue';
import Popup2 from './Popup2.vue';

export default {
  components: {
    Popup1,
    Popup2,
  },
  methods: {
    closePopup2() {
      this.$refs.popup2.closePopup2();
    },
  },
};
</script>

Теперь, при открытии Popup2, он будет закрывать Popup1 с помощью событий и методов, задействованных в компонентах Popup1 и Popup2. Обратите внимание, что в родительском компоненте мы используем this.$refs.popup2.closePopup2(), чтобы вызвать метод closePopup2 в компоненте Popup2.

Надеюсь, это помогло! Если у вас возникнут вопросы, не стесняйтесь задавать.