时间戳

首页 > 解决方案 > Vuejs 组件没有响应“mouseleave”事件

javascript - Vuejs 组件没有响应“mouseleave”事件

问题描述

我正在使用动态组件设置导航栏导航；这样，当您将鼠标悬停在导航栏链接上时，会显示一个适当的组件，而当您离开该组件时，该组件就会消失。组件确实出现了，但在“鼠标离开”时它不会消失或响应事件。示例代码如下所示。

我尝试了其他事件，例如@click但仍然没有响应。

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

我希望组件消失mouseleave

标签： javascriptvue.jsvuejs2vue-component

解决方案

当您在组件上放置事件侦听器时，它只会侦听该组件发出的事件，使用$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 元素不同。如果您使用的是 a，您所做的工作会很好，<div>但它不适用于组件。

推荐阅读