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

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

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

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

@click是用在按鈕上的語(yǔ)法糖

而@click.native是給vue組件綁定事件時(shí)候，必須加上native ，否則會(huì)認(rèn)為監(jiān)聽(tīng)的是來(lái)自Item組件自定義的事件

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

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

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

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

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

.native--偵聽(tīng)組件根元素上的原生事件

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

@click是我們?cè)趘ue開(kāi)發(fā)中經(jīng)常用到的事件綁定，而@實(shí)際上是 v-on 的簡(jiǎn)寫(xiě)，而 v-on 則是對(duì) vue 的事件體系封裝之后的 API接口

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

比如：如果使用router-link標(biāo)簽，加上@click事件，綁定的事件會(huì)無(wú)效，因?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>

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

相關(guān)文章

最新評(píng)論