vue中@click和@click.native.prevent的區別是什么

這篇文章主要介紹“vue中@click和@click.native.prevent的區別是什么”，在日常操作中，相信很多人在vue中@click和@click.native.prevent的區別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中@click和@click.native.prevent的區別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

@click和@click.native.prevent區別

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

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

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

這里說說默認事件

默認事件就是默認執行的事件，比如 a標簽，點擊a標簽，頁面會自動跳轉

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

vue當中的@click.native

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

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

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

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

比如：如果使用router-link標簽，加上@click事件，綁定的事件會無效，因為router-link的作用是單純的路由跳轉，會阻止click事件，如果不加 .native, 事件是不會觸發的，因此需要加上 .native 才會觸發事件

當你給一個vue組件綁定事件的時候，要加上native，如果是普通的html元素，就不需要

<template>
    <div id="app">
        <Button @click.native = 'goToNext'>點擊跳轉</Button>
    </div>
</template>

<script>
import Button from '../components/Button'
export default{
    components:{
        Button
    },
    data(){
        return{
        
        }
    }
    methods:{
        goToNext(){
            alert('hello--world')
        }
    }    
}
</script>

到此，關于“vue中@click和@click.native.prevent的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！