關(guān)于@click.native中?.native?的含義與使用方式
更新時間：2022年10月13日 16:36:37 作者：小魚兒同學(xué)啦
這篇文章主要介紹了關(guān)于@click.native中?.native?的含義與使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue的@click.native問題
.native--偵聽組件根元素上的原生事件
- 作用： 給組件綁定原生事件
@click是我們在vue開發(fā)中經(jīng)常用到的事件綁定，而@實際上是 v-on 的簡寫，而 v-on 則是對 vue 的事件體系封裝之后的 API接口
也就是說，在處理DOM原生事件的場合中需要添加額外的標(biāo)識符
- 比如：如果使用router-link標(biāo)簽，加上@click事件，綁定的事件會無效，因為router-link的作用是單純的路由跳轉(zhuǎn)，會阻止click事件，如果不加 .native, 事件是不會觸發(fā)的，因此需要加上 .native 才會觸發(fā)事件
當(dāng)你給一個vue組件綁定事件的時候，要加上native，如果是普通的html元素，就不需要
<template>
<div id="app">
<Button @click.native = 'goToNext'>點擊跳轉(zhuǎn)</Button>
</div>
</template>
<script>
import Button from '../components/Button'
export default{
components:{
Button
},
data(){
return{
}
}
methods:{
goToNext(){
alert('hello--world')
}
}
}
</script>@click.native.prevent
1.給vue組件綁定事件時候，組件加上.native才能監(jiān)聽原生事件，否則會認(rèn)為監(jiān)聽的是來自Item組件自定義的事件，
在封裝好的組件上使用，所以要加上.native才能click
2.prevent 是用來阻止默認(rèn)的 ，相當(dāng)于原生的event.preventDefault()
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件。
但父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符
js原生事件類型：
click：單擊dblclick：雙擊mousedown：鼠標(biāo)按下mouseup：鼠標(biāo)抬起mouseover：鼠標(biāo)懸浮mouseout：鼠標(biāo)離開mousemove：鼠標(biāo)移動
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue如何解決空格和空行報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何測量vue應(yīng)用運行時的性能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3 Composition API的使用簡介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
基于Vue實現(xiàn)人民幣小寫轉(zhuǎn)為大寫功能
在金融類應(yīng)用中,經(jīng)常需要將金額從小寫數(shù)字轉(zhuǎn)換為大寫形式,這種轉(zhuǎn)換主要用于正式票據(jù)、合同等場合,以增加文本的專業(yè)性和可讀性,本文將詳細(xì)介紹如何在Vue.js項目中實現(xiàn)這一功能,并提供多個示例和詳細(xì)的代碼說明,需要的朋友可以參考下2024-09-09