【Vue】事件处理_事件绑定_事件传参

1、简介

• Vue.js 中的事件绑定是 Vue 响应式系统的一个重要组成部分，它允许监听 DOM 事件并在事件触发时执行一些 JavaScript 代码。
• Vue 通过 v-on 指令（或简写为 @）来实现事件绑定。这使得在 Vue 组件中处理用户交互变得既简单又直观。

2、事件处理

在 Vue 组件的方法中，可以通过 $event 访问到原生 DOM 事件。

示例：

<template>  
  <button @click="handleClick">点击我</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick(event) {  
      console.log('按钮被点击了');  
      // 如果需要，你也可以使用 event 对象  
      console.log(event.target);  
    }  
  }  
}  
</script>

3、事件绑定

在 Vue 中，可以使用 v-on 指令来监听 DOM 事件，并在触发时执行一些方法。v-on 可以简写为 @，这在大多数情况下更简洁。

基本用法：

<button v-on:click="doSomething">点击我</button>  
<!-- 或简写为 -->  
<button @click="doSomething">点击我</button>

4、事件传参

直接在模板中传递参数：

• 如果需要在触发事件时传递额外的参数，可以直接在模板中的事件处理器中提供这些参数。
• 在方法内部，$event 会作为最后一个参数自动传入，但也可以显式地包含它。

<button @click="handleClick('额外参数')">点击我</button>

方法定义：

methods: {  
  handleClick(message, event) {  
    console.log(message); // '额外参数'  
    console.log(event); // DOM 事件对象  
  }  
}