關(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路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
網(wǎng)站中我們經(jīng)?？吹接袀€導(dǎo)航路徑,可以直觀地顯示當(dāng)前頁面的路徑,并快速返回之前的任意頁面,這是一個非常實用的功能,也是在Web前端必備的導(dǎo)航UI之一,這篇文章主要給大家介紹了關(guān)于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下2021-09-09
VUE跨域問題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個錯誤，VUE發(fā)送請求的時候不能請求到正確數(shù)據(jù)，VUE跨域問題Access to XMLHttpRequest at，本文就詳細(xì)的來介紹一下解決方法，感興趣的可以了解一下2022-05-05
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本文主要介紹了vue中el-table合并列的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了在Vue3中實現(xiàn)飄逸的元素拖拽,在本次案例中需要認(rèn)真思考對應(yīng)的幾個坐標(biāo)和移動時坐標(biāo)如何更新，事件的使用要成對出現(xiàn)，如何在這個拖拽的 Icon 上增加點擊事件時還需要多做一些處理，需要的朋友可以參考下2023-07-07
vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue如何通過Vue.prototype定義原型屬性實現(xiàn)全局變量
在Vue.js開發(fā)中,通過原型屬性為Vue實例添加全局變量是一種常見做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計算屬性產(chǎn)生命名沖突,這種方式簡單有效,確保了變量在所有Vue實例中的可用性,同時保持全局作用域的整潔2024-10-10
這篇文章主要介紹了vue實現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
淺談實現(xiàn)vue2.0響應(yīng)式的基本思路
這篇文章主要介紹了淺談實現(xiàn)vue2.0響應(yīng)式的基本思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02