Если вы читаете больше о области слота здесь ,
Этот слот имеет доступ к тем же свойствам экземпляра (то есть к той же «области действия»), что и остальная часть шаблона. .
Поскольку вы передаете свой form
через slot
, у вас уже будет доступ к экземпляру parent
компонента.
Также, как упоминалось в документации, полезно помнить
Все в родительском шаблоне компилируется в родительской области видимости; все в дочернем шаблоне скомпилировано в дочерней области.
Итак, когда вы пишете свой компонент,
<template>
<ModalComponent>
<form @submit="toggleModalVisibility">
...
</form>
</ModalComponent>
</template>
любой метод, переданный в form
, будет иметь доступ к state
родительского компонента.
Теперь, если вы можете просто установить свойство данных для переключения видимости модального компонента в родительском компоненте и метод для переключения этого свойства
data: () => {
return {
showModal: false //or true
}
},
methods: {
toggleModalVisibility() {
this.showModal = !this.showModal;
}
}
Вы можете просто назначить этот метод обработчику onSubmit вида
form @submit="toggleModalVisibility"