如何在Vue自定义组件中实现悬停事件和v-model

已经收录在网站上，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。在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,};}}--------------------------------------------.active{背景：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。这是在您自己的自定义组件中添加对双向数据绑定支持的一种非常简单但功能强大的方法。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://alligator.io/vuejs/ad...https://michaelnthiessen.com/...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎加星和改进。大家可以参考考点面试复习，关注公众号，在后台回复福利，福利就可以看到，你懂的。