Javascript Vuejs组件没有响应；“mouseleave”；事件

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

我尝试了其他事件，如

@单击

，但仍然没有响应

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

---

我希望组件在mouseleave上消失，当您在组件上放置事件侦听器时，它将仅使用

$emit

侦听该组件发出的事件。因此，如果您不在组件中调用

this.$emit（'mouseleave'）

，则永远不会调用该侦听器

您可以在内部侦听事件并发出它，但更可能的是您要查找的是

native

修饰符，它将直接将DOM事件附加到组件的最外层元素上：

@mouseleave.native=“showComponent=false”

---

注意，组件在这方面不同于原生HTML元素。如果您使用的是

，您所做的工作可能会很好，但它对组件不起作用。

当您在组件上放置事件侦听器时，它将只侦听该组件使用

$emit

发出的事件。因此，如果您不在组件中调用

this.$emit（'mouseleave'）

，则永远不会调用该侦听器

您可以在内部侦听事件并发出它，但更可能的是您要查找的是

native

修饰符，它将直接将DOM事件附加到组件的最外层元素上：

@mouseleave.native=“showComponent=false”

注意，组件在这方面不同于原生HTML元素。如果您使用的是

，那么您所做的工作可能会很好，但对于一个组件来说它不起作用