如何實(shí)現(xiàn) Vue 自定義組件中 hover 事件以及 v-model

作者：前端小智 2020-04-15 15:35:29

在CSS中，很容易在鼠標(biāo)hover時(shí)進(jìn)行更改，在Vue中，它會(huì)變得更復(fù)雜一些，因?yàn)槲覀儧](méi)有內(nèi)置這個(gè)功能。我們必須自己實(shí)現(xiàn)這些。不過(guò)別擔(dān)心，工作量不是很大。

在CSS中，很容易在鼠標(biāo)hover時(shí)進(jìn)行更改，只需：

.item { 
  background: blue; 
} 
 
.item:hover { 
  background: green; 
}

在Vue中，它會(huì)變得更復(fù)雜一些，因?yàn)槲覀儧](méi)有內(nèi)置這個(gè)功能。我們必須自己實(shí)現(xiàn)這些。不過(guò)別擔(dān)心，工作量不是很大。

[[322307]]

監(jiān)聽(tīng)正確的事件那么，我們需要監(jiān)聽(tīng)哪些事件?

我們想知道什么時(shí)候鼠標(biāo)懸停在元素上，這可以通過(guò)跟蹤鼠標(biāo)何時(shí)進(jìn)入元素以及何時(shí)離開(kāi)元素來(lái)確定。為了跟蹤鼠標(biāo)何時(shí)離開(kāi)，可以使用mouseleave事件。

檢測(cè)鼠標(biāo)何時(shí)進(jìn)入可以通過(guò)相應(yīng)的mouseenter事件來(lái)完成，但是我們不使用這個(gè)。

原因是在深度嵌套 DOM 樹(shù)上使用mouseenter時(shí)可能會(huì)出現(xiàn)嚴(yán)重的性能問(wèn)題。這是因?yàn)閙ouseenter向輸入的元素以及每個(gè)單獨(dú)的祖先元素觸發(fā)一個(gè)唯一的事件。

那我們會(huì)用什么來(lái)代替呢?

我們使用mouseover事件。

二者的本質(zhì)區(qū)別在于,mouseenter不會(huì)冒泡,簡(jiǎn)單的說(shuō),它不會(huì)被它本身的子元素的狀態(tài)影響到.但是mouseover就會(huì)被它的子元素影響到,在觸發(fā)子元素的時(shí)候,mouseover會(huì)冒泡觸發(fā)它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

為了把知識(shí)點(diǎn)串聯(lián)起來(lái)，我們使用Vue 事件偵聽(tīng)鼠標(biāo)進(jìn)入和離開(kāi)時(shí)的狀態(tài)，并相應(yīng)地更新?tīng)顟B(tài)。

 <template> 
   <div 
     @mouseover="hover = true" 
     @mouseleave="hover = false" 
   /> 
 </template> 
 ---------------------------------- 
  
 export default { 
  data() { 
    return { 
      hover: false, 
    }; 
  } 
}

現(xiàn)在通過(guò)變量 hover 就可以響應(yīng)鼠標(biāo)的進(jìn)入和移出。

在鼠標(biāo)懸停時(shí)顯示一個(gè)元素

如果希望顯示基于懸停狀態(tài)的元素，可以將其與v-if指令配對(duì)

 <template> 
   <div> 
     <span 
       @mouseover="hover = true" 
       @mouseleave="hover = false" 
     > 
       鼠標(biāo)懸停時(shí)顯示該內(nèi)容 
     </span> 
     <span v-if="hover">這里是秘密消息</span> 
  </div> 
</template> 
 
------------------------------------------------- 
 
export default { 
  data() { 
    return { 
      hover: false, 
    }; 
  } 
}

鼠標(biāo)懸停時(shí)切換樣式類(lèi)還可以做類(lèi)似的事情來(lái)切換類(lèi)

 <template> 
   <div> 
     <span 
       @mouseover="hover = true" 
       @mouseleave="hover = false" 
       :class="{ active: hover }" 
     > 
       Hover me to change the background! 
     </span> 
  </div> 
</template> 
------------------------------------------- 
 
export default { 
  data() { 
    return { 
      hover: false, 
    }; 
  } 
} 
------------------------------------------- 
 
.active { 
  background: green; 
}

雖然這是可行的，但不是最好的解決方案。

對(duì)于這種情況，最好使用CSS

<template> 
   <span> 
     Hover me to change the background! 
   </span> 
 </template> 
  
 ---------------------------------------- 
  
 span:hover { 
  background: green; 
}

將鼠標(biāo)懸停在一個(gè)Vue組件上

如果你想要使用一個(gè)Vue組件來(lái)實(shí)現(xiàn)這種行為，那么我們需要做一些輕微的修改。我們不能像以前那樣聽(tīng)mouseover和mouseleave事件。

如果Vue組件不發(fā)出那些事件，那么我們就不能監(jiān)聽(tīng)它們。

相反，我們可以添加.native事件修飾符來(lái)直接監(jiān)聽(tīng)定制Vue組件上的DOM事件。

 <template> 
   <my-custom-component 
     @mouseover.native="hover = true" 
     @mouseleave.native="hover = false" 
   /> 
 </template> 
 -------------------------------------- 
 export default { 
   data() { 
    return { 
      hover: false, 
    }; 
  } 
}

使用.native，我們偵聽(tīng)本地DOM事件，而不是從Vue組件發(fā)出的事件。

接著我們來(lái)看看如何在自定義組件中實(shí)現(xiàn) v-model。

雖然v-model是向普通組件添加雙向數(shù)據(jù)綁定的強(qiáng)大功能，但是如何向自己的自定義組件添加對(duì)v-model的支持并不總是那么容易，但其實(shí)很簡(jiǎn)單。

v-model 介紹

要了解如何在組件中實(shí)現(xiàn)v-model支持，需要了解它是如何工作的。雖然看起來(lái)很神奇，但v-model= syncedProp實(shí)際上是一個(gè)非常簡(jiǎn)單的簡(jiǎn)寫(xiě):value= syncedProp @input= syncedProp = arguments[0] (或者 value= syncedProp @input= syncedProp = $event.target)。

因此，要與v-model兼容，你的組件需要做的就是接受:value屬性，并在用戶(hù)更改值時(shí)發(fā)出@input事件。

基礎(chǔ)事例

假設(shè)有一個(gè)日期選擇器組件，該組件在一個(gè)對(duì)象中接受month和year的值，格式為：{month：1，year：2017}。該組件需要傳入兩個(gè)屬性值 month 和 year，，并通過(guò)v-model更新綁定對(duì)象。

 // DatePicker.vue 
 <template> 
   <div class="date-picker"> 
     Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/> 
     Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/> 
   </div> 
 </template> 
  
 <script> 
export default { 
  props: ['value'], 
 
  methods: { 
    updateDate() { 
      this.$emit('input', { 
        month: +this.$refs.monthPicker.value, 
        year: +this.$refs.yearPicker.value 
      }) 
    } 
  } 
}; 
</script>

使用方式：

 // WrapperComponent.vue 
  
 <template> 
   <div class="wrapper"> 
     <date-picker v-model="date"></date-picker> 
     <p> 
       Month: {{date.month}} 
       Year: {{date.year}} 
     </p> 
  </div> 
</template> 
 
<script> 
import DatePicker from './DatePicker.vue'; 
 
export default { 
  components: { 
    DatePicker 
  }, 
 
  data() { 
    return { 
      date: { 
        month: 1, 
        year: 2017 
      } 
    } 
  } 
}) 
</script>

如上所看到的，它只是接受一個(gè):value屬性并發(fā)出一個(gè)帶有更新日期的@input事件，一點(diǎn)也不復(fù)雜

高級(jí)用法

通過(guò)使用一個(gè)或多個(gè)計(jì)算屬性，我們可以將輸入數(shù)據(jù)(如字符串)反規(guī)范化為輸入元素更容易處理的格式。這通常與更高級(jí)的定制組件一起使用，這些組件必須處理各種可能的輸入格式，比如顏色選擇器。

對(duì)于日期選擇器示例，假設(shè)日期傳遞的格式是m/yyyy結(jié)構(gòu)的字符串。通過(guò)使用計(jì)算屬性(在本例中為splitDate)，我們可以將輸入字符串拆分為具有month和year屬性的對(duì)象，同時(shí)僅對(duì)日期選擇器組件進(jìn)行最少的修改。

 // StringyDatePicker.vue 
 <template> 
   <div class="date-picker"> 
     Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/> 
     Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/> 
   </div> 
 </template> 
  
 <script> 
export default { 
  props: ['value'], 
 
  computed: { 
    splitDate() { 
      const splitValueString = this.value.split('/'); 
 
       return { 
        month: splitValueString[0], 
        year: splitValueString[1] 
      } 
    } 
  }, 
 
  methods: { 
    updateDate() { 
      const monthValue = this.$refs.monthPicker.value; 
      const yearValue = this.$refs.yearPicker.value; 
      this.$emit('input', `${monthValue}/${yearValue}`); 
    } 
  } 
}; 
</script>