Как обрабатывать события, возникающие на элементах, переданных в слот?

Question

[Алексей Чернышов]

Как привязать обработку событию из слота, пример ниже набросал.
Почему-то this.$slots.default[0].elm выводит undefined, ходя в консоли this.$slots.default[0] выводится объект VNode.

файл html:

<vue-input>
   <input type="text" />
</vue-input>

файл vuejs

export default {
   name: 'VueInput',
    created () {
        this.$slots.default[0]. ????
   }
}

Как добавить обработку события, к примеру click?

Answer 1

[0xD34F]

Как привязать обработку событию из слота

Не очень понятно, зачем такое надо.

Почему-то this.$slots.default[0].elm выводит undefined

Потому что элемента ещё нет, чтобы он появился, надо дождаться монтирования экземпляра компонента в DOM - если вместо created используете mounted, то увидите, что элемент есть.

Comments

[Алексей Чернышов]

Спасибо, mounted помогло.
Привязал событие следующим образом:
this.$slots.default[0].elm.onclick = function () { ... }

[0xD34F]

this.$slots.default[0].elm.onclick = function () { ... }

Выглядит довольно стрёмно. Может легко отвалиться - в случае, если элемент слота будет создан заново. Если уж вот прям кровь из носу надо обрабатывать события элементов слота, я бы лучше повесил обработчик на родительский элемент (и конечно не трогая его непосредственно, а средствами vue - @click="..."), и проверял бы, что e.target является элементом слота.

[Алексей Чернышов]

0xD34F, спасибо за дополнение. Согласен в приведенном примере отвалиться может быстро ))
В рабочей версии идет поиск нужного элемента.