@click.native和@click的區(qū)別

@click 是 Vue.js 框架提供的模板語(yǔ)法，用于綁定 DOM 元素的 click 事件，等價(jià)于 v-on:click。它只能監(jiān)聽 Vue 組件內(nèi)部元素的 click 事件，并且會(huì)阻止默認(rèn)行為和事件冒泡。

而 @click.native 則是 Vue.js 框架提供的修飾符之一，用于監(jiān)聽 DOM 元素的原生 click 事件，不會(huì)對(duì)默認(rèn)行為和事件冒泡進(jìn)行任何處理。相比于 @click，它可以監(jiān)聽任何 DOM 元素的 click 事件，包括組件內(nèi)嵌套的子組件和子元素。

舉個(gè)例子：

如果你想監(jiān)聽一個(gè)來自于 slot 內(nèi)的元素的 click 事件，可以使用 @click.native 來綁定該事件。

使用@click點(diǎn)擊事件不生效、使用@click.native才生效是為啥？

在引入 better-scroll 組件中使用 @click 事件會(huì)失效，需要在 better-scroll 的配置項(xiàng)中設(shè)置 click: true，才能使 @click 事件生效。這是因?yàn)?better-scroll 會(huì)阻止默認(rèn)的瀏覽器事件，并將其轉(zhuǎn)化為自定義的滾動(dòng)事件，從而導(dǎo)致原生的 click 事件無(wú)法響應(yīng)。

而 @click.native 可以監(jiān)聽 DOM 元素的原生 click 事件，不會(huì)經(jīng)過 better-scroll 的處理，因此能夠正常響應(yīng)用戶的點(diǎn)擊操作。

綜上所述，如果在使用 better-scroll 或其他可能影響原生 click 事件響應(yīng)的組件時(shí)，建議使用 @click.native 來綁定 click 事件，從而避免事件失效的問題。

@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事件，而不是自定義事件。

如下：

<!-- 以下無(wú)論你怎么點(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事件。

總結(jié)

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

最新評(píng)論