vue3事件处理

在 Vue 3 中，事件处理与 Vue 2 类似，但也有一些改进和变化。以下是一些关于 Vue 3 事件处理的关键点：

基本语法

1. 绑定事件：
   使用 v-on 指令来绑定事件，简写为 @。

   <template>
     <button @click="handleClick">Click me</button>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         console.log('Button clicked!');
       }
     }
   }
   </script>
   

2. 方法事件处理器：
   可以直接在组件的 methods 选项中定义方法，并在模板中使用这些方法作为事件处理器。

3. 内联语句处理器：
   可以直接在模板中使用 JavaScript 表达式。

   <template>
     <button @click="count++">Clicked {{ count }} times.</button>
   </template>
   
   <script>
   export default {
     data() {
       return {
         count: 0
       }
     }
   }
   </script>
   

事件对象

在事件处理器中，Vue 会自动注入原生的浏览器事件对象，可以通过参数接收：

<template>
  <button @click="handleClick($event)">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event); // 打印事件对象
    }
  }
}
</script>

修饰符

Vue 提供了一些修饰符，可以用于调整事件处理器行为：

1. .stop - 调用 event.stopPropagation()。

   <button @click.stop="handleClick">Click me</button>
   

2. .prevent - 调用 event.preventDefault()。

   <form @submit.prevent="onSubmit">...</form>
   

3. .capture - 使用事件捕获模式。

   <div @click.capture="onDivClick">...</div>
   

4. .self - 只在事件是从自身元素触发时触发回调。

   <div @click.self="onDivSelfClick">...</div>
   

5. .once - 事件处理器最多只会触发一次。

   <button @click.once="handleClickOnce">Click me once</button>
   

6. .passive - 提高滚动性能，表示事件侦听器不会调用 preventDefault()。

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

按键修饰符

Vue 还提供了按键修饰符，用于监听特定按键事件：

• .enter, .tab, 等：

  <input @keyup.enter="submitForm" />
  

自定义事件

1. 在子组件中触发事件：
   使用 this.$emit 在子组件中触发自定义事件。

   <template>
     <button @click="emitEvent">Emit Event</button>
   </template>
   
   <script>
   export default {
     methods: {
       emitEvent() {
         this.$emit('custom-event', { data: 'Hello' });
       }
     }
   }
   </script>
   

2. 在父组件中监听事件：
   使用 v-on 或 @ 来监听子组件的事件。

   <template>
     <ChildComponent @custom-event="handleCustomEvent" />
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleCustomEvent(payload) {
         console.log(payload); // { data: 'Hello' }
       }
     }
   }
   </script>
   

组合式 API 中的事件处理

如果使用组合式 API，可以通过 ref 和 reactive 来管理状态，并在 setup 函数中定义事件处理逻辑：

<template>
  <button @click="increment">Clicked {{ count }} times.</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}
</script>

通过这些方式，你可以在 Vue 3 中有效地处理事件并与用户进行交互。