1. 使用及定义
定义方法

function 方法名称(接受的event或是什么都不写) {//不管方法后括号内写与不写event,都可以接受到方法内表达式
}//定义一个接受参数的方法,此时也会在传入event
function 方法名称(传入参数) {//可接受传入参数与event方法内表达式
}
//定义一个接受参数的方法与event
function 方法名称(传入参数, event) {方法内表达式
}

调用

<!--此处click调用countAdd方法,默认传入event.注意如果想默认传入event不要加括号--><button @click="无参方法名"></button><button @click="方法名(入参)"></button><button @click="方法名(入参,$event占位符)"></button><button @click="(event) => 方法名(入参, event参数)"></button>

2. 事件处理案例

<template><div>{{ count }}</div><br /><!--此处click调用countAdd方法,默认传入event.注意如果想默认传入event不要加括号--><button @click="countAdd" name="我是button的名字">count++</button><br /><div>{{ message }}</div><br /><button @click="countAddByParameter('您好')" name="我是button的名字">为message添加您好</button><br /><button @click="countAddByParameterAndevent('您好',$event)" name="我是button的名字">为message添加您好并传入event</button><br /><button @click="(event) => countAddByParameterAndevent('您好', event)" name="我是button的名字">为message添加您好并传入event</button>
</template>
<script setup>
//从vue中获取ref方法
import { ref, reactive } from "vue";name: "App";let count = ref(0);
let message = ref("11111");
//定义一个无参数方法,此处event可写可不写,不写时也会传入
function countAdd(event) {//此处特别注意,因为使用了ref进行相应式,所以值为count的valuecount.value++;console.log("-----------------------------什么都没有传入-------------------------------------");console.log("count++:", count.value);//输出没有参数传入时默认传入值eventconsole.log("控件name属性:", event.target.name);
}//定义一个接受参数的方法,此时也会在传入event
function countAddByParameter(msg) {message.value = msg;console.log("-----------------------------传入参数但未传event--------------------------------");console.log("message.value:", message.value);//输出没有参数传入时默认传入值eventconsole.log("控件name属性:", event.target.name);
}
//定义一个接受参数的方法与event
function countAddByParameterAndevent(msg, event) {message.value = msg;console.log("-----------------------------同时传入参数与event--------------------------------");console.log("message.value:", message.value);console.log("控件name属性:", event.target.name);
}
</script><style scoped>
</style>