vue @click與@click.native,及vue事件機(jī)制的使用分析
@click與@click.native及vue事件機(jī)制
vue維護(hù)了自己的事件機(jī)制。
所以就有了原生DOM事件和自定義事件的區(qū)別，比如下面這段官網(wǎng)原話。
用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
本文也將圍繞這一句話展開。
想必大家都會(huì)在自定義組件中自定義事件。
<my-component v-on:my-event="doSomething"></my-component>
那么如何給自定義組價(jià)添加原生事件呢，其實(shí)想一想理論上是不可行的，因?yàn)樽远x組件最終不會(huì)渲染到頁(yè)面上，怎么加？
所以Vue給自定義組件綁定原生事件的做法是：把原生事件綁定到組件的根節(jié)點(diǎn)，根節(jié)點(diǎn)就只有一個(gè)嘛…
但是你要告訴vue，當(dāng)前要給原生節(jié)點(diǎn)綁定DOM事件，而不是自定義事件。如下：
<!-- 以下無論你怎么點(diǎn)擊hello都不會(huì)觸發(fā)父組件的事件的 -->
<!-- 除非加上@click="$emit('click')"，也就是觸發(fā)自定義事件 -->
<template>
? <div class="hello">
? ? hello
? </div>
</template>
<template>
? <div id="app">
? ? <HelloWorld msg="Welcome to Your Vue.js App" @click="clickEvent"/>
? </div>
</template><script>
? methods: {
? ? clickEvent(){
? ? ? console.log('事件觸發(fā)')
? ? }
? }
</script>或者直接簡(jiǎn)單的使用.native。
<HelloWorld msg="Welcome to Your Vue.js App" @click.native="clickEvent"/>
好了，你已經(jīng)了解了.native的用途。接下來，再說一說原生節(jié)點(diǎn)綁定自定義DOM事件。直接看代碼如下：
<template> ? <div id="app" @customizedEvent="myEvent"> ? ? <HelloWorld msg="Welcome to Your Vue.js App"/> ? </div> </template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
? name: 'App',
? components: {
? ? HelloWorld
? },
? mounted() {
? ? const app = document.getElementById('app');
? ? const event = document.createEvent('HTMLEvents');
? ? event.initEvent('customizedEvent', false, true);
? ? app.dispatchEvent(event);
? },
? methods: {
? ? myEvent() {
? ? ? console.log('customizedEvent')
? ? }
? }
}
</script>我們通過原生的事件派發(fā)機(jī)制可以觸發(fā)綁定到原生元素的事件。說明vue幫你做的事情其實(shí)是
app.addEventListener('customizedEvent', myEvent, false);也就是說并非走的組件中的自定義事件，而是原生的DOM事件。
點(diǎn)擊事件@click 失效
問題：在標(biāo)簽上設(shè)置點(diǎn)擊事件@click，發(fā)現(xiàn)無法觸發(fā)事件發(fā)生
原因：發(fā)現(xiàn)這個(gè)標(biāo)簽上有個(gè)全局樣式，對(duì)它造成了影響;
pointer-event: none
解決：將這個(gè)屬性值改為auto即可
pointer-event: auto
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中常常會(huì)把組件分為非單文件組件和單文件組件，這篇文章主要為大家介紹了非單文件組件的具體使用方法，文中的示例代碼講解詳細(xì)，需要的可以參考一下2023-05-05
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
案例實(shí)操vue事件修飾符帶你快速了解與應(yīng)用
這篇文章主要介紹了vue常見的事件修飾符,在平時(shí)無論是面試還是學(xué)習(xí)工作中都會(huì)經(jīng)常遇到的,本文就帶你快速上手,需要的朋友可以參考下2023-03-03
vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue框架提供了前端開發(fā)組件的思想，可以通過組件來組合成一個(gè)完整的頁(yè)面，都是隨著組件數(shù)量原來越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01