Vue事件处理之v-on

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>
  <!--多事件处理-->
  <button @click="方法名(有无参数都行),方法名(有无参数都行),方法名(有无参数都行)"></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的value
  count.value++;
  console.log("-----------------------------什么都没有传入-------------------------------------");
  console.log("count++:", count.value);
  //输出没有参数传入时默认传入值event
  console.log("控件name属性:", event.target.name);
}

//定义一个接受参数的方法,此时也会在传入event
function countAddByParameter(msg) {
  message.value = msg;
  console.log("-----------------------------传入参数但未传event--------------------------------");
  console.log("message.value:", message.value);
  //输出没有参数传入时默认传入值event
  console.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>