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

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

成都创新互联专业为企业提供盐津网站建设、盐津做网站、盐津网站设计、盐津网站制作等企业网站建设、网页设计与制作、盐津企业网站模板建站服务，十载盐津做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

监听正确的事件那么，我们需要监听哪些事件?

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

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

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

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

我们使用mouseover事件。

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  ---------------------------------- 
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.  export default { 
    5. 
  
  
  
  5.   data() { 
    6. 
  
  
  
  6.     return { 
    7. 
  
  
  
  7.       hover: false, 
    8. 
  
  
  
  8.     }; 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. } 
    11.

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. ------------------------------------------------- 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. export default { 
    6. 
  
  
  
  6.   data() { 
    7. 
  
  
  
  7.     return { 
    8. 
  
  
  
  8.       hover: false, 
    9. 
  
  
  
  9.     }; 
    10. 
  
  
  
  10.   } 
    11. 
  
  
  
  11. } 
    12.

鼠标悬停时切换样式类还可以做类似的事情来切换类

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2. ------------------------------------------- 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. export default { 
    5. 
  
  
  
  5.   data() { 
    6. 
  
  
  
  6.     return { 
    7. 
  
  
  
  7.       hover: false, 
    8. 
  
  
  
  8.     }; 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. } 
    11. 
  
  
  
  11. ------------------------------------------- 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. .active { 
    14. 
  
  
  
  14.   background: green; 
    15. 
  
  
  
  15. } 
    16.

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

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.  ---------------------------------------- 
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5.  span:hover { 
    6. 
  
  
  
  6.   background: green; 
    7. 
  
  
  
  7. } 
    8.

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

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  -------------------------------------- 
    3. 
  
  
  
  3.  export default { 
    4. 
  
  
  
  4.    data() { 
    5. 
  
  
  
  5.     return { 
    6. 
  
  
  
  6.       hover: false, 
    7. 
  
  
  
  7.     }; 
    8. 
  
  
  
  8.   } 
    9. 
  
  
  
  9. } 
    10.

使用.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. 
  
  
  
  2.   
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.   
    5.

使用方式：

 
 
 
    
  
  
  
  1.  // WrapperComponent.vue 
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6.

如上所看到的，它只是接受一个:value属性并发出一个带有更新日期的@input事件，一点也不复杂

高级用法

通过使用一个或多个计算属性，我们可以将输入数据(如字符串)反规范化为输入元素更容易处理的格式。这通常与更高级的定制组件一起使用，这些组件必须处理各种可能的输入格式，比如颜色选择器。

对于日期选择器示例，假设日期传递的格式是m/yyyy结构的字符串。通过使用计算属性(在本例中为splitDate)，我们可以将输入字符串拆分为具有month和year属性的对象，同时仅对日期选择器组件进行最少的修改。

 
 
 
    
  
  
  
  1.  // StringyDatePicker.vue 
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5.  
    6.

一旦熟悉了这里介绍的概念，可能会发现自己对任何和每个我们创建的接受用户输入的组件都使用了v-model。这是在自己的自定义组件中添加双向数据绑定支持的一种非常简单但功能强大的方法。

当前题目：如何实现Vue自定义组件中hover事件以及v-model
网站地址：http://www.shufengxianlan.com/qtweb/news22/489822.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

各行业网站

亮美家　　 　瑞杰企业管理　　 　帝美豪门窗　　 　西信服务器托管　　 　南部网站建设　　 　四川内江电信机房　　 　网站改版　　 　网站收录　　 　软文营销　　 　香港四川國際商會　　 　简阳电信服务器托管　　 　成都小程序制作　　 　成都宣传画册设计　　 　四川瑞杰　　 　led无边发光字　　 　主机租用　　 　成都网站制作　　 　led背发光字　　 　德信企业管理　　 　彭州网站建设