欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue @click與@click.native,及vue事件機(jī)制的使用分析

 更新時(shí)間：2022年04月22日 09:40:53   作者：胡聊前端  
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

@click與@click.native及vue事件機(jī)制

vue維護(hù)了自己的事件機(jī)制。

所以就有了原生DOM事件和自定義事件的區(qū)別，比如下面這段官網(wǎng)原話。

用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

本文也將圍繞這一句話展開。

想必大家都會在自定義組件中自定義事件。

<my-component v-on:my-event="doSomething"></my-component>

那么如何給自定義組價(jià)添加原生事件呢，其實(shí)想一想理論上是不可行的，因?yàn)樽远x組件最終不會渲染到頁面上，怎么加？

所以Vue給自定義組件綁定原生事件的做法是：把原生事件綁定到組件的根節(jié)點(diǎn)，根節(jié)點(diǎn)就只有一個(gè)嘛…

但是你要告訴vue，當(dāng)前要給原生節(jié)點(diǎn)綁定DOM事件，而不是自定義事件。如下： 

<!-- 以下無論你怎么點(diǎn)擊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é)點(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è)全局樣式，對它造成了影響;

pointer-event: none

解決：將這個(gè)屬性值改為auto即可

pointer-event: auto

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論