vue自定义组件和v-model中hover事件的实现方法

在CSS中，鼠标悬停时很容易改变，只需：.item{background:blue;}.item:hover{background:green;}在Vue中，它变得有点复杂，因为我们没有内置此功能。我们必须自己实现这些功能。不过别担心，这不是一个很大的工作量。监听正确的事件那么，我们需要监听哪些事件呢？我们想知道鼠标什么时候在元素上，这可以通过跟踪鼠标何时进入元素和何时离开元素来确定。要跟踪鼠标何时离开，可以使用mouseleave事件。可以通过相应的mouseenter事件来检测鼠标何时进入，但我们不使用它。原因是在深度嵌套的DOM树上使用mouseenter时可能会出现严重的性能问题。这是因为mouseenter向输入的元素以及每个单独的祖先元素触发了一个独特的事件。那么我们用什么呢？我们使用鼠标悬停事件。两者的本质区别是mouseenter不会冒泡。简单地说，它不会受到自身子元素状态的影响。但是鼠标悬停会受到其子元素的影响。在触发子元素时，mouseover会通过冒泡的方式触发其父元素。（如果要防止mouseover的冒泡事件，使用mouseenter）为了串联知识点，我们使用Vue事件监听鼠标进入和离开时的状态，并相应更新状态。-------------------------------exportdefault{data(){return{hover:false,};}}现在变量hover可以响应鼠标的进入和退出了。在鼠标悬停时显示元素如果你想根据悬停状态显示元素，你可以将它与v-if指令配对---------------------------------------------------exportdefault{data(){return{hover:false,};}}在鼠标悬停时切换样式类您还可以执行类似于切换类的操作-------------------------------------------exportdefault{data(){return{hover:false,};}}--------------------------------------.active{background:green;}虽然这可行，但它不是最佳解决方案。对于这种情况，最好使用CSS----------------------------------span:hover{background:green;}将鼠标悬停在一个Vue组件上如果你想使用一个Vue组件来实现这个行为，那么我们需要做一些细微的修改。我们不能像以前那样监听mouseover和mouseleave事件。如果Vue组件不发出这些事件，那么我们就无法收听它们。相反，我们可以添加.native事件修饰符来直接监听自定义Vue组件上的DOM事件。--------------------------------------exportdefault{data(){return{hover:false,};}}使用.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:1,year:2017}的对象中的月份和年份值。组件需要传入month和year两个属性值，通过v-model更新绑定对象。//DatePicker.vue使用方法：//WrapperComponent.vue正如你在上面看到的，它只接受一个:value属性并发出一个带有更新日期的@input事件，根本没有杂项高级用法通过使用一个或多个计算属性，我们可以将输入数据（例如字符串）反规范化为输入元素更容易处理的格式。这通常与更高级的自定义组件结合使用，这些组件必须处理各种可能的输入格式，例如颜色选择器。对于日期选择器示例，假设日期作为m/yyyy结构的字符串传递。通过使用计算属性（在本例中为splitDate），我们可以将输入字符串拆分为具有月份和年份属性的对象，同时只对日期选择器组件进行最小的修改。//StringyDatePicker.vue一旦熟悉通过此处介绍的概念，您可能会发现自己对我们创建的任何接受用户输入的组件都使用v-model。这是在您自己的自定义组件中添加对双向数据绑定支持的一种非常简单但功能强大的方法。