7、Vue 3 （2024 版）基础笔记 - 事件处理

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

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

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

准备工作

1、创建组件

src/components/EventDemo.vue

<script setup lang="ts"></script>

<template></template>

2、引入组件

<template>
	...

    <event-demo/>
</template>

<script setup lang="ts">
	...
    
    import EventDemo from "@/components/EventDemo.vue";

</script>

内联事件

src/components/EventDemo.vue

<template>
    <button @click="count++">增加</button>
    <p>{{ count }}</p>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    // 创建响应式数据
    const count = ref(0);
</script>

ref 用于创建响应式数据。

方法事件

src/components/EventDemo.vue

<template>
    <button @click="greet">增加</button>
    <p>{{ count }}</p>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    const count = ref(0);

    function greet () {
        count.value++
    }
</script>

使用 count.value 获取值的原因：

• 因为使用了响应式引用对象结构。即 const count = ref(0)，如此，count 就已经不是一个简单的数字值，而一个包含如下结构的对象：

  {
    value: 0, // 实际的值
    __v_isRef: true, // 标识这是一个由Vue提供的ref对象
    ...
  }
  

• 访问响应式引用的值。模板中使用 {{count}} 即输出值，是因为 Vue 会自动解析响应式引用，即自动取出 .value 属性值并进行渲染

• 更新响应式引用的值：在 greet函数中，需要使用 count.value++

事件参数

获取 event 对象

src/components/EventDemo.vue

<template>
    <button @click="greet">增加</button>
    <p>{{ count }}</p>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    const count = ref(0);

    // 获取 event 对象
    function greet (e) {
        e.target.innerHTML = '增加 ' + count.value
        count.value++
    }
</script>

在 Vue 中，事件处理器（如@click）默认会将原生事件对象作为参数传递给绑定的回调函数。

传递参数

src/components/EventDemo.vue

<template>
    <ul>
        <li @click="getUserHandler(user)" v-for="(user, index) in users" :key="index">{{ user }}</li>
    </ul>
</template>

<script setup lang="ts">
    const users = ["王美丽", "王小丽", "王丽丽"];

    // 定义 getUserHandler 函数，接收一个用户名参数
    const getUserHandler = function (userName) {
        console.log(userName)
    }
</script>

传递参数并获取 event 对象

src/components/EventDemo.vue

<template>
    <ul>
        <!-- 函数接收两个参数：当前用户姓名（user）和原生DOM事件对象（$event） -->
        <!-- 当需要传递多个参数且首个参数不是事件对象时，需使用特殊变量$event来传递事件对象 -->
        <li @click="getUserHandler(user, $event)" v-for="(user, index) in users" :key="index">{{ user }}</li>
    </ul>
</template>

<script setup lang="ts">
    const users = ["王美丽", "王小丽", "王丽丽"];

    // 定义 getUserHandler 函数，接收两个参数：用户名和原生 DOM 事件对象
    const getUserHandler = function (userName, event) {
        console.log(event)
        console.log(userName)
    }
</script>

事件修饰符

Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once

阻止默认事件

src/components/EventDemo.vue

<template>
    <a @click.prevent="clickHandler" href="https://www.ziruchu.com" target="_blank">自如初</a>
</template>

<script setup lang="ts">
    const clickHandler = function () {
        console.log('我被触发了,没有进行跳转')
    }
</script>

阻止事件冒泡

1）先来看看不阻止冒泡的效果

src/components/EventDemo.vue

<template>
    <div @click="clickDivHandler">
        <p @click="clickPHandler">测试冒泡</p>
    </div>

</template>

<script setup lang="ts">
    const clickDivHandler = function () {
        console.log('div')
    }

    const clickPHandler = function () {
        console.log('p')
    }
</script>

控制台输出结果如下：

p
div

2）阻止冒泡

src/components/EventDemo.vue

<template>
    <div @click="clickDivHandler">
        <!-- 组件事件冒泡 -->
        <p @click.stop="clickPHandler">测试冒泡</p>
    </div>

</template>

<script setup lang="ts">
    const clickDivHandler = function () {
        console.log('div~我不会被输出了')
    }

    const clickPHandler = function () {
        console.log('p')
    }
</script>