Использую vuejs3.
Для реализации модального окна (условно
Modal.vue) с разношерстным контентом внутри, выбрал подход со слотами.
Все было прекрасно, но есть компонент с формой (условно
Form.vue), при сабмите которой нужно, чтобы это модальное окно закрывалось.
Упрощенная реализация следующая:
Modal.vue
<template>
<div class="modal" v-if="modalShow">
<span class="modal__close" @click="toggleModalShow">x</span>
<div class="modal__title">
<slot name='modal-title'></slot>
</div>
<div class="modal__content">
<slot name='modal-content'></slot>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
export const modalShow = ref<boolean>(false)
export function toggleModalShow() {
modalShow.value = !modalShow.value
}
</script>
Form.vue
<template>
<form @submit="fuSubmit">
<button type="submit">Отправить</button>
</form>
</template>
<script lang="ts" setup>
export const fuSubmit = (e:any) => {
e.preventDefault();
}
</script>
App.vue
<template>
<Modal>
<template v-slot:modal-title>Форма</template>
<template v-slot:modal-content>
<Form/>
</template>
</Modal>
</template>
<script lang="ts" setup>
</script>
И от сюда вопрос, как при сабмите формы в Form.vue перехватить это событие в Modal.vue
Пробовал через emit передать, но получилось перехватить событие только в App.vue, но не в Modal.vue:
<template>
<form @submit="fuSubmit">
<button type="submit">Отправить</button>
</form>
</template>
<script lang="ts" setup="{ emit }">
export const fuSubmit = (e:any) => {
emit('modal-close');
e.preventDefault();
}
</script>
п.с. Встречал подобные вопросы, например
здесь.
