如何将参数传递给 Vue @click 事件处理程序 - JavaScript

在 Vue.js 中，@click 是一种用于处理点击事件的指令。有时候我们需要在点击事件中传递参数给事件处理程序。这可以通过以下几种方式来实现。

方法 1: 使用箭头函数

通过使用箭头函数，我们可以直接在模板中传递参数给点击事件处理程序。

<template>
  <div>
    <button @click="handleClick('参数')">点击按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(param) {
      console.log(param); // 输出: 参数
    }
  }
}
</script>

方法 2: 使用事件对象

当需要访问事件对象时，可以使用 $event 参数将其传递给点击事件处理程序。

<template>
  <div>
    <button @click="handleClick($event, '参数')">点击按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event, param) {
      console.log(event.target); // 输出: 点击的按钮元素
      console.log(param); // 输出: 参数
    }
  }
}
</script>

方法 3: 使用绑定的参数

如果参数是从数据中获取的，我们可以将它绑定到组件的值中，然后在点击事件处理程序中访问该值。

<template>
  <div>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '参数'
    }
  },
  methods: {
    handleClick() {
      console.log(this.param); // 输出: 参数
    }
  }
}
</script>

以上是在 Vue.js 中将参数传递给 @click 事件处理程序的几种常用方法。通过运用这些技巧，可以更灵活地处理点击事件，并传递所需的参数。