今天繼續來學習事件處理的方式
我們也可以向綁定的 function 傳入自訂的參數
eg.

<template>
  <div :class="attr">
    <button @click="say('hello')">Say hello</button>
    <button @click="say('bye')">Say bye</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const attr = 'box'

function say(message) {
    alert(message)
}

</script>

<style scoped>
    .box{
        gap:5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: x-large;
        border: solid;
        margin-left: 650px;
        margin-top: 5px;
        height: 200px;
        width:350px;
        padding: 35px;
    }
</style>

分別依照不同參數印出

v-on 的修飾子

• .stop
• .prevent
• .capture
• .once
• .passive

.stop 是 stopPropagation 的意思，意思是終止冒泡，目前的狀況點擊 btn 只會觸發內層，如果將 .stop 拿掉就會同時觸發內層 + 外層

<template>
    <div class="box">
        <div @click="outerClick">
            div
            <button @click.stop="innerClick">btn</button>
        </div>
    </div>
  
</template>

<script setup>
function outerClick() {
  alert('outer triggered')
}
function innerClick() {
  alert('inner triggered')
}
</script>

<style scoped>
    .box{
        gap:5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: x-large;
        border: solid;
        margin-left: 650px;
        margin-top: 5px;
        height: 200px;
        width:350px;
        padding: 35px;
    }
</style>

.prevent 是 preventDefault 的意思，submit 預設會刷新當前頁面，當我們加入 .prevent 就能阻止它執行預設功能

<template>
    <div :class="attr">
        <form @submit.prevent="onSubmit">
        <input v-model="msg" />
        <button type="submit">送出</button>
  </form>
    </div>
  
</template>

<script setup>
import { ref } from 'vue'
const attr = 'box'
const msg = ref('')

function onSubmit() {
  alert(`輸入的訊息: ${msg.value}`)
}
</script>


<style scoped>
    .box{
        gap:5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: x-large;
        border: solid;
        margin-left: 650px;
        margin-top: 5px;
        height: 200px;
        width:350px;
        padding: 35px;
    }
</style>

.capture 會先觸發外層，再觸發內層

<template>
    <div class="box">
        <div @click.capture="outer">
            外層
            <button @click="inner">內層</button>
        </div>
    </div>
  
</template>

<script setup>
function outer() {
  alert('outer triggered')
}
function inner() {
  alert('inner triggered')
}
</script>

<style scoped>
    .box{
        gap:5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: x-large;
        border: solid;
        margin-left: 650px;
        margin-top: 5px;
        height: 200px;
        width:350px;
        padding: 35px;
    }
</style>

.once 代表事件僅只會觸發一次

<button @click.once="sayHi">click me</button>

.passive 告訴瀏覽器這個事件處理器不會呼叫 preventDefault， .passive 與 .prevent 兩者不應混用

<div @scroll.passive="onScroll">...</div>

ref:
https://zh-hk.vuejs.org/guide/essentials/event-handling.html
https://ithelp.ithome.com.tw/articles/10198999