1.@mouseover与@mouseout
鼠标经过时自身触发事件，其子元素同时也触发该事件。
父亲有的东西，儿子也有 ，支持冒泡。
适用于鼠标移入移出时子元素也会执行事件的场景，或者单一标签。
2.@mouseenter与@mouseleave
鼠标经过时自身触发事件，其子元素不触发该事件。
父亲的东西就是父亲的，儿子没有 ，不支持冒泡。
适用于鼠标移入移出时该块整体元素只执行一次事件的场景，例如自行封装的多层级组件。
在此我封装了一个模块组件，希望鼠标只在移入组件区域和离开时执行事件，就应当采用@mouseenter与@mouseleave。
父组件：文章来源：https://www.toymoban.com/news/detail-501779.html
<progressBar :barData="electricTotal"></progressBar>
import progressBar from './components/progress_bar';
components: {
progressBar
},
子组件：文章来源地址https://www.toymoban.com/news/detail-501779.html
<div class="progress_bar" @mouseenter="handleEnter" @mouseleave="handleLeave">
<div class="row" v-for="(item,index) in sliceData" :key="index">
{{item.value}}
</div>
</div>
// 鼠标移入
handleEnter() {
console.log('in');
},
// 鼠标移出
handleLeave() {
console.log('out');
}
到了这里，关于vue中鼠标移入移出事件种类以及区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
