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