Vue: можно ли подписаться на события компонентов, добавленных через слот?

Question

[Илья Мясин]

Хочу сделать компонент-обертку для модальных окон. В модальное окно вставляется компонент-форма через slot. Форма умеет порождать события "cancel" и "success", по которым надо закрывать окно. Само окно порождает событие "close". Сейчас получается примерно так:

<a @click="showModal = true">открыть форму</a>
<Modal v-if="showModal" @close="showModal = false">
  <Form @success="showModal = false" />
</Modal>

Компонент Modal устроен примерно так:

<div class="modal">
    <div class="modal__overlay"></div>
    <div class="modal__body">
        <slot />
    </div>
</div>

Можно ли сделать, чтобы компонент Modal сам слушал события, которые эмитят компоненты, добавленные в slot?

Мысль первая - добавить обработчик прямо на слот:

<slot @success="close()" />

Но не работает - есть ишью об этом, Эван идею запорол =) Но дело было год назад, может чего придумали за это время?

Мысль вторая - протаскивать событие через DOM, но это какое-то джейквири-программирование =)

Мысль третья - мне вообще не нравится вот это ручное оборачивание. Было бы круто вызывать так:

<Form modal="true" />

Понятно, что это идеологически плохо, но для моей задачи хорошо. И интересно, как вообще это решается - видимо, нужен миксин, но что в нем писать я пока не понимаю =)

Готовые модалки на ву посмотрел, похожего не нашел, может тоже кто видел?

UPD: А кстати, есть еще динамические компоненты, есть смысл в эту сторону копать?

Answer 1

[Александр Гонтарев]

не отвечу точно можно или нет, но могу сказать наверняка, что это очень плохо. Допустим я взял ваш компонент модалки, и решил, добавить свою форму, и допустим она тоже эмитит событие success, и модалка по вашей задумке закроется, а для меня это будет проблема, потому что я не хочу чтобы она сразу закрывалась, мне придется изменять api моего компонента

<a @click="showModal = true">открыть форму</a>
<Modal v-if="showModal" @close="showModal = false">
  <MySuperForm @success="handleSubmit" />
</Modal>

сама идея конечно интересная, слушать события слота, но именно для модалки лучше оставить так как вы первый раз написали, это правильно и это понятно будет всем

P.S. можно вообще слушать события типа так

this.$parent.$on(...)
this.$children.$on(...)