1.@mouseover與@mouseout
鼠標(biāo)經(jīng)過(guò)時(shí)自身觸發(fā)事件，其子元素同時(shí)也觸發(fā)該事件。
父親有的東西，兒子也有 ，支持冒泡。
適用于鼠標(biāo)移入移出時(shí)子元素也會(huì)執(zhí)行事件的場(chǎng)景，或者單一標(biāo)簽。
2.@mouseenter與@mouseleave
鼠標(biāo)經(jīng)過(guò)時(shí)自身觸發(fā)事件，其子元素不觸發(fā)該事件。
父親的東西就是父親的，兒子沒(méi)有 ，不支持冒泡。
適用于鼠標(biāo)移入移出時(shí)該塊整體元素只執(zhí)行一次事件的場(chǎng)景，例如自行封裝的多層級(jí)組件。
在此我封裝了一個(gè)模塊組件，希望鼠標(biāo)只在移入組件區(qū)域和離開(kāi)時(shí)執(zhí)行事件，就應(yīng)當(dāng)采用@mouseenter與@mouseleave。
父組件：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-501779.html
<progressBar :barData="electricTotal"></progressBar>
import progressBar from './components/progress_bar';
components: {
progressBar
},
子組件：文章來(lái)源地址http://www.zghlxwxcb.cn/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>
// 鼠標(biāo)移入
handleEnter() {
console.log('in');
},
// 鼠標(biāo)移出
handleLeave() {
console.log('out');
}
到了這里，關(guān)于vue中鼠標(biāo)移入移出事件種類(lèi)以及區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
