VUE3基础学习之click事件详解

在Vue.js中，我们经常需要为DOM元素绑定事件，响应用户交互操作。而click事件是最常用的事件之一，本文将介绍在 Vue3 中如何使用 click 事件。

添加点击事件

在Vue3中，可以使用 v-on 指令来绑定 click 事件。例如，将一个按钮与 handleClick 方法绑定：

<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('已点击！');
    }
  }
}
</script>

在v-on:click中，click是事件名称，handleClick是该事件对应的处理方法。

传递参数

当需要传递参数时，可以在事件处理方法中将参数作为参数传递。

例如，在处理方法中，我们想要将用户输入的信息作为参数传递给事件处理方法：

<template>
  <input type="text" v-model="text" >
  <button v-on:click="handleClick(text)">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    handleClick(text) {
      console.log('传递参数：' + text);
    }
  }
}
</script>

在上述示例中，我们首先通过 v-model 指令绑定了一个输入框，并用 text 属性来存储用户输入的内容。在处理方法 handleClick 中，使用 text 参数传递了用户输入的信息。

捕获事件修饰符

在 Vue3 中，可以使用 @click.capture 来添加捕获事件修饰符。例如：

<template>
  <div @click.capture="divClicked">
    <button @click="buttonClicked">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    divClicked() {
      console.log('div被点击了！');
    },
    buttonClicked() {
      console.log('button被点击了！');
    }
  }
}
</script>

在上述示例中，我们绑定了一个点击事件到一个父元素，并使用了 .capture 修饰符使其成为一个捕获事件。同时，在子元素按钮上，我们绑定了一个click事件。

按钮被点击的时候，它的click事件会冒泡到父元素div，父元素响应了click事件并打印了“div被点击了！”，最后子元素自身的click事件再被响应并打印了“button被点击了！”。如果用 @click 替换 @click.capture ，则先响应子元素自身的click事件，父元素div不再响应click事件。