8.1 监听事件

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

8.1.1 基础事件监听

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

示例代码：

<template>
  <div>
    <!-- 使用v-on监听点击事件 -->
    <button v-on:click="handleClick">点击我</button>
    <!-- 使用@简写形式 -->
    <button @click="handleClick">或点击我</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了！');
    }
  }
}
</script>

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

8.1.2 事件修饰符

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

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

示例代码：

<template>
  <div @click="divClicked">
    <button @click.stop.prevent="buttonClicked">点击我，但事件不会冒泡也不会执行默认行为</button>
  </div>
</template>
<script>
export default {
  methods: {
    buttonClicked() {
      console.log('按钮被点击了，但事件不会冒泡');
    },
    divClicked() {
      console.log('外层div被点击了'); // 这行不会被执行
    }
  }
}
</script>

8.1.3 事件对象

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

示例代码：

<template>
  <button @click="handleClickWithEvent">点击我，并查看事件对象</button>
</template>
<script>
export default {
  methods: {
    handleClickWithEvent(event) {
      console.log(event.type); // 输出 'click'
      console.log(event.target); // 输出触发事件的DOM元素
    }
  }
}
</script>

8.1.4 自定义事件

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

子组件：

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">通知父组件</button>
</template>
<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', '来自子组件的消息');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
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应用。