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

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

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

舉個例子：

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

使用@click點擊事件不生效、使用@click.native才生效是為啥？

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

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

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

@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事件。

總結(jié)

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

最新評論