Как правильно передавать данные состояния VUE3 Composition API?

Question

[Nina Fineberg]

У меня есть домашняя страница, в которой есть компонент Header в котором есть кнопка вызывающее модальное окно, модальное окно это обычный элемент UI с базовыми настройками, в который мне нужно передать HTML с например с регистрацией, но я не совсем понимаю как это правильно сделать при этом храня состояние без Vuex. На данный момент это выглядит вот так:

Homepage

controllers
	|__ModalsController.js // тут я планировала хранить состояние модального окна (открыто/закрыто/переключено)

ui
 |__ Heaader.vue //тут кнопка вызывающее конкретное модальное окно (например регистрацию) 
 |__ ModalBase.vue //базовая верстка модального окна 

pages
    |__Login.vue 	//верстка модального окна входа

Но несколько раз прочитав документацию я не разобралась как это все связать Буду очень признательна если кто-то подскажет. Заранее спасибо!

Answer 1

[LJ322]

Можете просто добавить компонент модального окна в тот компонент, где оно должно вызываться и там реализовать всю необходимую логику и состояние модалки хранить там же, где она и вызывается

<template>
  <div class="home">
    <img 
      alt="Vue logo" 
      src="../assets/logo.png"
    >
    <Modal
      v-if="modalOpen"
    >
      <div 
        v-html="someData"
      ></div>
    </Modal>

    <button 
      @click="modalIsOpen = !modalIsOpen"
    >
      Переключатель модалки
    </button>
  </div>
</template>

<script>
import Modal from '@/components/Modal.vue'
import { ref } from 'vue';

export default {
  name: 'Home',

  components: {
    Modal,
  },

  setup() {
    const modalIsOpen = ref(true);
    const someData = 'some data...';

    return { modalIsOpen, someData };
  },
}
</script>