8.1 监听事件-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 8.1 监听事件

在Vue.js中，监听事件是组件与用户交互不可或缺的一部分。事件监听允许我们在用户执行特定操作（如点击、输入、滚动等）时执行相应的代码逻辑，从而增强应用的交互性和动态性。本章将深入探讨Vue.js中的事件监听机制，包括基础事件监听、修饰符的使用、事件对象处理、自定义事件以及组件间的事件通信等。

#### 8.1.1 基础事件监听

Vue.js通过`v-on`指令（或其简写形式`@`）来监听DOM事件。当在模板中绑定事件时，可以指定一个处理函数或表达式，该函数将在事件发生时被调用。

**示例代码**：

```html
<template>
  <div>
    
    <button v-on:click="handleClick">点击我</button>
    
    <button @click="handleClick">或点击我</button>
  </div>
</template>

在这个例子中，当用户点击任一按钮时，都会调用`handleClick`方法，从而在控制台输出消息。

#### 8.1.2 事件修饰符

Vue.js提供了一系列事件修饰符，用于处理DOM事件的细节，如阻止默认行为、阻止事件冒泡等，无需在方法中编写额外的JavaScript代码。

- **.stop**：阻止事件冒泡。
- **.prevent**：阻止事件的默认行为。
- **.capture**：使用事件捕获模式。
- **.self**：只当事件在该元素本身（而不是子元素）触发时触发处理函数。
- **.once**：事件只触发一次。
- **.passive**：表示监听器永远不会调用`preventDefault()`。

**示例代码**：

```html
<template>
  <div @click="divClicked">
    <button @click.stop.prevent="buttonClicked">点击我，但事件不会冒泡也不会执行默认行为</button>
  </div>
</template>

#### 8.1.3 事件对象

Vue.js的事件处理方法默认接收一个事件对象作为参数，你可以通过这个对象访问到事件的详细信息，如事件类型、触发事件的元素等。

**示例代码**：

```html
<template>
  <button @click="handleClickWithEvent">点击我，并查看事件对象</button>
</template>

#### 8.1.4 自定义事件

在Vue.js中，除了监听原生DOM事件外，还可以自定义事件，用于组件间的通信。子组件可以通过`$emit`方法触发事件，父组件监听这些事件来响应子组件的状态变化。

**子组件**：

```html

<template>
  <button @click="notifyParent">通知父组件</button>
</template>

**父组件**：

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出：来自子组件的消息
    }
  }
}
</script>
```

#### 8.1.5 组件间的事件通信进阶

随着Vue应用复杂度的增加，组件间的通信变得更加重要和复杂。除了简单的父子组件通信外，Vue.js还支持通过全局事件总线（Event Bus）、Vuex状态管理库、provide/inject API等多种方式实现跨组件通信。

- **全局事件总线**：创建一个空的Vue实例作为事件总线，通过`$on`、`$emit`和`$off`方法实现跨组件通信。
- **Vuex**：专为Vue.js应用程序开发的状态管理模式库，集中存储所有组件的共享状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- **provide/inject**：主要用于高阶插件/组件库的开发，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起始组件和注入组件之间建立起响应式联系。

#### 8.1.6 小结

事件监听是Vue.js中处理用户交互的重要机制。通过`v-on`指令或`@`简写形式，我们可以轻松地为DOM元素绑定事件监听器，并通过事件修饰符简化事件处理逻辑。同时，Vue.js还支持自定义事件，使得组件间的通信变得更加灵活和强大。掌握事件监听和组件间通信，是开发高效、可维护Vue.js应用的基石。

在未来的开发中，你可能还会遇到更复杂的场景，如需要跨多层级的组件通信、管理全局状态等。此时，可以考虑使用Vuex状态管理库、全局事件总线或Vue的provide/inject API等高级特性来解决问题。通过这些工具，你可以构建出更加灵活、可扩展的Vue.js应用。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(二)

vue项目构建基础入门与实战

Vue3技术解密

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(三)

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

Vue原理与源码解析

VUE组件基础与实战

TypeScript和Vue从入门到精通(五)

Vue面试指南