Vue中提供了@click事件,用于處理元素的鼠標(biāo)點(diǎn)擊事件。該事件可以用在任何元素上,不僅限于按鈕。在Vue組件中,可以使用@click來(lái)監(jiān)聽(tīng)子組件的點(diǎn)擊事件,并將該事件傳遞到父組件。
下面是一個(gè)示例代碼,當(dāng)點(diǎn)擊按鈕時(shí),將會(huì)觸發(fā)sayHello方法:
<template>
<div>
<button @click="sayHello">Say Hello!</button>
</div>
</template>
<script>
export default {
methods: {
sayHello () {
console.log('Hello!')
}
}
}
</script>
除了普通的@click事件,Vue還提供了一些修飾符,用于增強(qiáng)事件處理。例如,.prevent修飾符用于阻止默認(rèn)事件,.stop修飾符用于停止事件傳播,.once修飾符用于只觸發(fā)一次事件。下面是一個(gè)示例代碼,當(dāng)點(diǎn)擊鏈接時(shí),阻止頁(yè)面跳轉(zhuǎn):
<template>
<div>
<a @click.prevent>Visit Google</a>
</div>
</template>
總結(jié)而言,Vue的@click事件提供了一種方便的方式來(lái)處理元素的點(diǎn)擊事件,并且還支持多種修飾符,使得事件處理更加靈活。