Vuejs Component не отвечает на событие mouseleave

Question

Я настраиваю навигационную панель с динамическим компонентом;таким образом, что при наведении курсора на навигационную ссылку появляется соответствующий компонент, а когда вы выходите, компонент исчезает.Компоненты отображаются, но при «отпускании мышью» они не исчезают и не реагируют на событие.Пример кода показан ниже.

Я пробовал другие события, такие как @click и до сих пор нет ответа.

<keep-alive>
  <component :is="selectedComponent" v-if="showComponent"  @mouseleave="showComponent = false"></component>
</keep-alive>

Я ожидаю, что компонент исчезнет на mouseleave

Answer 1

Когда вы помещаете прослушиватель событий в компонент, он будет прослушивать только события, испускаемые этим компонентом, используя $emit.Поэтому, если вы не вызываете this.$emit('mouseleave') в своем компоненте, этот слушатель никогда не будет вызван.

Вы можете прослушивать событие внутри себя и генерировать его, но более вероятно, что вы ищете, это nativeмодификатор, который будет прикреплять события DOM непосредственно к самому внешнему элементу компонента:

@mouseleave.native="showComponent = false"

https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

Обратите внимание, что компоненты отличаются от собственных элементов HTML в этом отношении.То, что вы сделали, работало бы нормально, если бы вы использовали <div>, но это не сработало бы для компонента.