vue事件处理

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。

用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

1.内联事件处理器

内联事件处理器：

<template>
    <!-- count 是一个变量。 say 是一个函数（注意此处有括号）, 函数可以接受入参，如：sayHello-->
    <button @click="count++;">Add One</button>
    <p>Count is: {{ count }}</p>

    <!-- say 是一个函数（注意此处有括号）-->
	  <button @click="say()"></button>

    <!-- sayHello 是一个函数，可以向函数中传递参数 -->
	  <button @click="sayHello("jack")"></button>
</template>

<script setup>
	  const count = ref(0)
	
	  function say() {
        alert(`hello everyone`)
    }

    function sayHello(name) {
        alert(`hello ${name}`)
    }
	
</script>

内联事件处理器也可以访问原生 DOM 事件。例如：

<template>
    <!--  DOM 事件的名字必须是 $event, $event 的位置可以是任意位置 -->
    <button @click="console.log($event)">submit</button>
    <button @click="sayBye('Tom', $event)">sayBye</button>
</template>

<script setup>
    function sayBye(name, event) {
        alert(`Bye ${name}!`)

        if (event) {
            alert(event.target.tagName)
        }
    }
</script>

2.方法事件处理器

方法事件处理器就是函数/方法名。

<template>
    <!-- `greet` 是上面定义过的方法名 -->
	  <button @click="greet">Greet</button>

    <!-- 函数体定义在 v-on 指令中，也即了 lambda 表达式 -->
    <button @click="() => console.log('Hello World!')">sayHi</button>

</template>

<script setup>

  const name = ref('Vue.js')

	function greet(event) {
	  alert(`Hello ${name.value}!`)

	  // `event` 是 DOM 原生事件
	  if (event) {
		alert(event.target.tagName)
	  }
	}
	
</script>

看起来，方法事件处理器无法接受入参。事实上，只是我们无法向它传参而已，vue 是可以向它传参的，传入的是一个原生的 DOM 事件

3.方法与内联事件判断​

模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo[‘bar’] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。