Question

我正在设置带有动态组件的导航栏导航；这样，当您将鼠标悬停在导航栏链接上时，就会显示一个适当的组件，而当您离开组件时，该组件就会消失。组件确实显示了，但是在“ mouseleave”上并没有消失或对事件没有响应。下面显示了示例代码。

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

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

我希望该组件在mouseleave上消失

Answer 1

将事件侦听器放在组件上时，它将仅使用Gender IQ_mean Other_mean Test_mean IQ_min Other_min Test_min IQ_max <chr> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> 1 f 99.2 0.301 -0.0770 81.9 0.187 -1.18 121. 2 m 89.0 0.395 0.163 62.5 0.0483 -0.632 106. # … with 2 more variables: Other_max <dbl>, Test_max <dbl>侦听该组件发出的事件。因此，如果您没有在组件中调用$emit，则永远不会调用监听器。

您可以在内部侦听事件并发出事件，但更可能是您要寻找的是this.$emit('mouseleave')修饰符，该修饰符会将DOM事件直接附加到组件的最外层元素上：

native

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

请注意，组件在这方面与本机HTML元素不同。如果您使用的是@mouseleave.native="showComponent = false"，那么您所做的工作会很好，但不适用于组件。

Vue.js组件未响应“ mouseleave”事件

1 个答案: