Vue - 事件处理详解

旧城等待， 2024-02-05 20:38 57阅读 0赞

### 组件代码 ###

下面是一个基本的 Vue.js 组件代码，其中包含了不同类型的事件处理器：

<template>
      <div>
        
        <button @click="increaseCount">加 1</button>
        <p>计数为: {
       { count }}</p>
    
        
        <button @click="greet">打招呼</button>
    
        
        <button @click="say('你好')">说你好</button>
        <button @click="say('再见')">说再见</button>
    
        
        <button @click="warn('表单目前无法提交。', $event)">提交</button>
        <button @click="(event) => warn('表单目前无法提交。', event)">提交</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          count: 0,
          name: "Vue.js"
        };
      },
      methods: {
        // 方法事件处理器：打招呼方法
        greet(event) {
          alert(`你好 ${this.name}！`);
          if (event) {
            alert(event.target.tagName);
          }
        },
    
        // 在内联事件处理器中调用方法：接收消息参数并弹出提示框
        say(message) {
          alert(message);
        },
    
        // 在内联事件处理器中访问事件参数：阻止默认提交行为并弹出警告
        warn(message, event) {
          if (event) {
            event.preventDefault();
          }
          alert(message);
        },
    
        // 内联事件处理器：增加计数方法
        increaseCount() {
          this.count++;
        }
      }
    };
    </script>

### 内联事件处理器 ###

内联事件处理器是一种简单而直接的处理事件的方式。在上述代码中，我们使用 `@click` 或 `v-on:click` 来监听按钮的点击事件，并调用相应的方法。例如，`@click="increaseCount"` 表示点击按钮时调用 `increaseCount` 方法来增加计数。

### 方法事件处理器 ###

当事件处理逻辑变得更为复杂时，可以使用方法事件处理器。在上述代码中，我们定义了 `greet`、`say`、`warn`、和 `increaseCount` 方法，然后通过 `@click` 直接引用这些方法。这使得代码更加模块化和易于维护。

### 事件参数和修饰符 ###

Vue.js 允许我们访问原生 DOM 事件及其参数。例如，通过 `$event` 变量，我们可以在 `warn` 方法中访问原生 DOM 事件，并阻止其默认行为。同时，Vue.js 提供了事件修饰符，如 `.stop`、`.prevent`、`.self` 等，用于简化事件处理的常见需求。