欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年04月21日 11:33:13   作者：Z_Gleng  
這篇文章主要介紹了vue中@click和@click.native.prevent的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

@click是用在按鈕上的語法糖

而@click.native是給vue組件綁定事件時候，必須加上native ，否則會認(rèn)為監(jiān)聽的是來自Item組件自定義的事件

prevent是用來阻止默認(rèn)的事件。就相當(dāng)于…event.preventDefault()，父組件想在子組件上監(jiān)聽自己的click的話，需要加上native修飾符。

這里說說默認(rèn)事件

默認(rèn)事件就是默認(rèn)執(zhí)行的事件，比如 a標(biāo)簽，點(diǎn)擊a標(biāo)簽，頁面會自動跳轉(zhuǎn)

@click.native中.native的含義與使用

vue當(dāng)中的@click.native

.native--偵聽組件根元素上的原生事件

作用：給組件綁定原生事件

@click是我們在vue開發(fā)中經(jīng)常用到的事件綁定，而@實(shí)際上是 v-on 的簡寫，而 v-on 則是對 vue 的事件體系封裝之后的 API接口

也就是說，在處理DOM原生事件的場合中需要添加額外的標(biāo)識符

比如：如果使用router-link標(biāo)簽，加上@click事件，綁定的事件會無效，因?yàn)閞outer-link的作用是單純的路由跳轉(zhuǎn)，會阻止click事件，如果不加 .native, 事件是不會觸發(fā)的，因此需要加上 .native 才會觸發(fā)事件

當(dāng)你給一個vue組件綁定事件的時候，要加上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>

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

相關(guān)文章

最新評論