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