Vue中@click.native的使用方法及場景

更新時間：2023年11月14日 10:27:26 作者：苡然_

在組件中時常看到@click.native,在項目中遇到后,簡單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場景的相關(guān)資料,需要的朋友可以參考下

一、@click.native 是什么？

@click.native是 Vue 中用于監(jiān)聽原生 DOM 事件的一種方式。

通常情況下，我們在組件上使用 @click 監(jiān)聽點擊事件時，實際上是監(jiān)聽了組件內(nèi)部封裝的一個模擬點擊事件，并不是真正的原生點擊事件。

而使用 @click.native 可以直接監(jiān)聽原生的點擊事件，不需要經(jīng)過組件的封裝和處理。這對于一些特殊的場景可能會更加方便和靈活。

例如，在以下代碼中，我們可以使用@click.native監(jiān)聽 div 元素的點擊事件：

<template>
  <div @click.native="handleClick">點擊我</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('你點擊了 div 元素');
    },
  },
};
</script>

在以上代碼中，我們將 @click.native 綁定到 div 元素上，當用戶點擊該元素時，會觸發(fā) handClick 方法，并在控制臺輸出一條提示信息。

需要注意的是，由于 @click.native 是綁定在原生 DOM 上的，因此只能用于綁定原生 DOM 事件，不能用于綁定自定義事件或組件事件。

二、使用場景：通常使用在需要直接監(jiān)聽原生 DOM 事件的情況下

例如：

在某些第三方庫或插件中，需要直接監(jiān)聽原生 DOM 事件進行操作。
在 Vue 組件內(nèi)部，需要對組件外部的元素或組件的原生事件進行監(jiān)聽或處理。
在編寫自定義指令時，需要對綁定指令的元素或組件的原生事件進行處理。
在一些特殊的業(yè)務(wù)場景中，需要使用原生 DOM 事件來實現(xiàn)某些功能。

總之，當需要直接監(jiān)聽原生 DOM 事件時，可以使用 @click.native 來監(jiān)聽點擊事件，而不是使用組件封裝的模擬事件。這樣可以更加靈活和方便地處理和操作 DOM 元素。

附：@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 事件，從而避免事件失效的問題。