vue中鼠标移入移出事件种类以及区别

1.@mouseover与@mouseout

鼠标经过时自身触发事件，其子元素同时也触发该事件。
父亲有的东西，儿子也有 ，支持冒泡。

适用于鼠标移入移出时子元素也会执行事件的场景，或者单一标签。

2.@mouseenter与@mouseleave

鼠标经过时自身触发事件，其子元素不触发该事件。
父亲的东西就是父亲的，儿子没有 ，不支持冒泡。

适用于鼠标移入移出时该块整体元素只执行一次事件的场景，例如自行封装的多层级组件。

在此我封装了一个模块组件，希望鼠标只在移入组件区域和离开时执行事件，就应当采用@mouseenter与@mouseleave。

父组件：

<progressBar :barData="electricTotal"></progressBar>

import progressBar from './components/progress_bar';

components: {
  progressBar
},

子组件：

  <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');
    }