Как поймать события из Element UI?

Question

[exhang]

Element UI, компонент Popover. ElPopover отправляет события при нажатии

Не могу понять, как подписаться на это событие?

<div id="content" v-on:hide="alert('ff')" >

Не отрабатывает. Как работать с этими событиями?

Answer 1

[0xD34F]

<div id="content" v-on:hide="alert('ff')" >

Во-первых - обработчик вешать надо на экземпляр popover'а. Во-вторых, дайте-ка угадаю - в компоненте метода alert у вас нет, вы ждёте, что выполнится window.alert. Нет, так не будет. Делайте отдельный метод и вызывайте его там:

<el-popover
  @hide="onHide"
  ...

methods: {
  onHide() {
    alert('HIDE');
  },
  ...

UPD. Вынесено из комментариев:

Метод alert есть

в root событие v-on:hide не ловится

Понятно. Варианты тут такие:

1. Пробрасывать событие наверх по всей иерархии. Подписались на событие на popover'е, кинули такое же (или не совсем, имя лучше бы другое сочинить, а то в отрыве от своего источника выглядит слишком общим, непонятно, что это такое) - @hide="$emit('hide')"; подписались на событие в родителе, снова emit; ну и т.д., до корневого компонента (если что, в нём делать emit уже не надо, вместо него будет ваш alert).
   
2. Спускать вниз обработчик. В корне, на экземпляре компонента, внутри которого находится popover, подписываетесь на событие: @hide="alert". На всех уровнях ниже, включая popover, тоже, только обработчик берёте уже не из методов, а из того, что сверху передано - @hide="$listeners.hide" (или v-on="$listeners", если надо передавать вниз всё, или кроме hide больше ничего нет).
   
3. Можно воспользоваться ссылкой на корень.
   
   В компоненте, где создаётся экземпляр popover'а:
   
   

   <el-popover
     @hide="$root.$emit('popover-hide')"
     ...

   
   В корне:
   
   

   mounted() {
     this.$on('popover-hide', this.alert);
     ...

   
   
4. Шина событий: Vue.prototype.$eventBus = new Vue;. Этот способ самый гибкий - слушать события можно где угодно откуда угодно.
   
   Действуете аналогично предыдущему варианту, только emit/on вызываете у шины, а не корня:
   
   

   <el-popover
     @hide="$eventBus.$emit('popover-hide')"
     ...

   
   

   mounted() {
     this.$eventBus.$on('popover-hide', this.alert);
     ...

   
   
   

Comments

[exhang]

Метод alert есть, созвучно с window.alert, согласен не корректно показал пример. Проблема в том что в root событие v-on:hide не ловится, ничего не происходит.

[0xD34F]

А откуда вы взяли, что должно ловиться? Вы себе это нафантазировали, не должно.

[exhang]

0xD34F, а почему не должно? Не могу понять. Это получается событие доступно только в самом компоненте и все что выше нет? А смысл тогда от пользовательских событий?

[0xD34F]

а почему не должно?

Потому в нормальных условиях, без стояния на голове, событие идёт только на один уровень вверх. Так уж vue устроен.

Дополнил ответ вариантами действий в вашей ситуации.