vue中使用v-on绑定一个方法的参数传递问题_v-on 绑定对象,怎么给方法传值-CSDN博客

本文链接：https://blog.csdn.net/weixin_43974265/article/details/112591083

本文探讨了在Vue中使用v-on绑定方法时的参数传递问题。情况一是若方法不需要额外参数，不加括号即可，但若方法已有形参，即使不显式传参，仍会默认传递event。情况二是需传入参数和event时，可借助$event传入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当通过 methods 中定义方法，以供@click调用时，需要注意参数问题：

情况一：

如果该方法不需要传递额外参数，那么方法后的括号 () 可以不加。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>

<div id="app">
  <!-- 此处加不加括号两个按钮的效果是一样的 -->
  <button @click="btnClick1">按钮1</button>
  <button @click="btnClick2()">按钮2</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick1() {
        console.log(1);
      },
      btnClick2() {
        console.log(2);
      }
    }
  });
</script>
</body>
</html>

注意：如果 methods 中定义的方法中本身有一个形参，但是在 @click 绑定方法的时候没有显式的传入实参，那么会默认将原生事件 event 参数传递进去。

<div id="app">
  <!-- 没有传递参数 -->
  <button @click="btnClick3">按钮3</button>

  <!-- 如果加()，下边打印出来的 event 将是 undefined -->
  <!--  <button @click="btnClick3()">按钮3</button>-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      //这里有一个形参
      btnClick3(event) {
        console.log(event);
      }
    }
  });
</script>

在这里插入图片描述

情况二

如果在 @click 绑定方法的时候需要传入某个参数，同时又需要 event 时，可以通过 $event 传入事件。

<div id="app">
  <button @click="btnClick4('我是灰太狼',$event)">按钮4</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick4(name,event) {
        console.log(name);
        console.log(event);
      }
    }
  });
</script>