如何实现 Vue 自定义组件中 hover 事件以及 v-model

在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  

 6
 7----------------------------------
 8
 9export default {
10  data() {
11    return {
12      hover: false,
13    };
14  }
15}

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

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

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

 1
 2  

 3    
 7      鼠标悬停时显示该内容
 8    
 9    这里是秘密消息
10  
11
12
13-------------------------------------------------
14
15export default {
16  data() {
17    return {
18      hover: false,
19    };
20  }
21}

鼠标悬停时切换样式类

还可以做类似的事情来切换类

 1
 2  

 3    
 8      Hover me to change the background!
 9    
10  
11
12-------------------------------------------
13
14export default {
15  data() {
16    return {
17      hover: false,
18    };
19  }
20}
21-------------------------------------------
22
23.active {
24  background: green;
25}

虽然这是可行的，但不是最好的解决方案。

对于这种情况，最好使用CSS

 1
 2  
 3    Hover me to change the background!
 4  
 5
 6
 7----------------------------------------
 8
 9span:hover {
10  background: green;
11}

将鼠标悬停在一个Vue组件上

如果你想要使用一个Vue组件来实现这种行为，那么我们需要做一些轻微的修改。我们不能像以前那样听mouseover和mouseleave事件。

如果Vue组件不发出那些事件，那么我们就不能监听它们。

相反，我们可以添加.native事件修饰符来直接监听定制Vue组件上的DOM事件。

 1
 2  
 6
 7--------------------------------------
 8export default {
 9  data() {
10    return {
11      hover: false,
12    };
13  }
14}

使用.native，我们侦听本地DOM事件，而不是从Vue组件发出的事件。

接着我们来看看如何在自定义组件中 实现 v-model。

虽然v-model是向普通组件添加双向数据绑定的强大功能，但是如何向自己的自定义组件添加对v-model的支持并不总是那么容易，但其实很简单。

v-model  介绍

要了解如何在组件中实现v-model支持，需要了解它是如何工作的。虽然看起来很神奇，但v-model= syncedProp实际上是一个非常简单的简写:value= syncedProp @input= syncedProp = arguments[0] (或者 value= syncedProp @input= syncedProp = $event.target)。

因此，要与v-model兼容，你的组件需要做的就是接受:value属性，并在用户更改值时发出@input事件。

基础事例

假设有一个日期选择器组件，该组件在一个对象中接受month和year的值，格式为：{month：1，year：2017}。该组件需要传入两个属性值 month 和 year，，并通过v-model更新绑定对象。

 1// DatePicker.vue
 2
 3  
 4    Month: 
 5    Year: 
 6  

 1// WrapperComponent.vue
 2
 3
 4  
 5    
 6    

 7      Month: {{date.month}}
 8      Year: {{date.year}}
 9    
10