详解Vue之事件处理

Vue.js 是一款流行的前端框架，它的事件处理能力非常强大。本文将详细讲解 Vue.js 中的事件处理，包括如何使用 v-on 指令绑定事件、如何传递参数和修饰符、以及如何使用自定义事件等。

绑定事件

在 Vue.js 中，我们可以使用 v-on 指令来绑定事件。省略了 v-on 直接写 @ 符号，作用相同，下面的几个示例中直接使用 @ 符号了。常用的事件有 click、keyup、keypress、mouseover 等。

下面是一个绑定 click 事件的示例：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked');
    },
  },
};
</script>

在上面的例子中，我们使用了 @click 指令来绑定 handleClick 这个方法，当用户点击按钮时，便会调用 handleClick 方法。在 methods 中声明的方法都可以绑定到 DOM 上，实现事件处理。

传递参数

对于有参数的事件处理，我们可以在 @eventName 后面添加需要传递的参数，形如 @eventName="handler(arg)"。传递参数的方式有两种：使用 $event 或者在事件处理方法中发射自定义事件。

使用 $event

<template>
  <button @click="logMessage('hello world', $event)">点击我</button>
</template>

<script>
export default {
  methods: {
    logMessage(message, event) {
      console.log(message);
      console.log(event);
    },
  },
};
</script>

在上面的例子中，我们在 @click 后面传递了两个参数：第一个是字符串 "hello world"，第二个是 $event 对象，代表当前的事件对象。在事件处理方法 logMessage 中，我们在控制台中分别输出了这两个值。

发射自定义事件

下面是一个通过自定义事件传递参数的例子：

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(message) {
      console.log(`从子组件传递过来的消息: ${message}`);
    },
  },
};
</script>

在上面的例子中，我们定义了一个子组件 ChildComponent，并在父组件中使用 @custom-event 听取它的自定义事件。当子组件需要传递一些消息给父组件时，可以使用 $emit() 方法：

<template>
  <button @click="$emit('custom-event', 'hello world')">点击我</button>
</template>

在上面例子中，我们在按钮的 @click 事件处理方法中调用了 $emit() 方法，并传递了一个字符串 "hello world"，将这个消息传递给父组件。

事件修饰符

Vue.js 提供了一些事件修饰符，用于处理一些特殊的事件。比如，.stop 可以阻止事件传播，.prevent 可以阻止事件的默认行为，.capture 可以使用事件捕获方式。下面是一些例子：

<template>
  <div @click="handleDivClick($event)">
    <button @click.stop="handleButtonClick">点击我</button>
    <a href="https://www.baidu.com/" target="_blank" @click="handleLinkClick($event)">点击我</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('button clicked');
    },
    handleLinkClick(event) {
      event.preventDefault();
      console.log('link clicked');
    },
    handleDivClick(event) {
      console.log('div clicked');
    },
  },
};
</script>

在上面的例子中，我们在 button 元素上使用了 .stop 修饰符，这样当点击按钮时，事件就不会继续传播到父元素；在 a 元素上使用了 .prevent 修饰符，这样当点击链接时，事件的默认行为就会被阻止；在父元素 div 上无修饰符，这样当点击 div 时，事件将继续向上传播。

自定义事件

除了使用内置的事件之外，我们还可以自定义事件，这些事件是非常有用的。在 Vue.js 中，我们可以使用 $emit() 方法在父组件中发射事件，并在子组件中使用 v-on 指令监听这些事件。下面是一个自定义事件的例子：

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="sendMessage">发送消息</button>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', this.message);
    },
    handleCustomEvent(message) {
      console.log(`从子组件传递过来的消息: ${message}`);
    },
  },
};
</script>

在上面的例子中，我们定义了一个父组件，其中包含一个文本框和一个按钮。当用户点击按钮时，父组件会通过 $emit() 方法发射一个 send-message 自定义事件，并传递文本框中的值。在子组件中，我们使用 @custom-event 指令监听这个自定义事件，并在事件处理方法中获取到这个消息。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

在上面的例子中，我们定义了一个子组件 ChildComponent，并使用 props 将父组件传递过来的消息绑定到子组件中的 message 属性上。

这就是 Vue.js 中事件处理的一些常用技巧和知识点。如果想要了解更多，可以查看 Vue.js 官方文档。