angular监听input事件_如何实现 Vue 自定义组件中 hover 事件以及 vmodel

在CSS中，很容易在鼠标hover时进行更改，只需：

1.item {
    
2  background: blue;
3}
4
5.item:hover {
    
6  background: green;
7}

在Vue中，它会变得更复杂一些，因为我们没有内置这个功能。我们必须自己实现这些。不过别担心，工作量不是很大。

监听正确的事件

那么，我们需要监听哪些事件？

我们想知道什么时候鼠标悬停在元素上，这可以通过跟踪鼠标何时进入元素以及何时离开元素来确定。为了跟踪鼠标何时离开，可以使用mouseleave事件。

检测鼠标何时进入可以通过相应的mouseenter事件来完成，但是我们不使用这个。

原因是在深度嵌套 DOM 树上使用mouseenter时可能会出现严重的性能问题。这是因为mouseenter向输入的元素以及每个单独的祖先元素触发一个唯一的事件。

那我们会用什么来代替呢？

我们使用mouseover事件。

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

为了把知识点串联起来，我们使用Vue 事件侦听鼠标进入和离开时的状态，并相应地更新状态。

 1 2   3    @mouseover="hover = true" 4    @mouseleave="hover = false" 5  /> 6
 7----------------------------------
 8
 9export default {
    
10  data() {
    
11    return {
    
12      hover: false,
13    };
14  }
15}

现在通过变量 hover 就可以响应鼠标的进入和移出。

在鼠标悬停时显示一个元素

如果希望显示基于悬停状态的元素，可以将其与v-if指令配对

 1<template><