前置

  • 有时候我们会看到绑定回调函数的时候,就拿最普遍的超链接的@click事件来说,有时候我们会看到别人这样子写

写法一

1
<a @click="handleClick">单击我</a>

写法二

1
<a @click="handleClick()">单击我</a>
  • 那么写法一盒写法二有什么区别呢?(注意是有区别的)

我们书写下代码(很简单的代码,对比输出不同而已)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <a @click="handleClick">单击我1</a>
   <a @click="handleClick()">单击我2</a>
</template>

<script>
export default {
  name: "App",
  setup(){
    function handleClick(testParam){
      console.log("输出查看",testParam);
    }
    return {
      handleClick,
    }
  }
};
</script>

[单击我1]输出结果(就是不添加括号的)

[单击我2]输出结果(就是添加括号的)

结论

  • 相不添加括号 @click = “handleClick” 会默认传入一个event参数

  • 添加括号 @click = “handleClick()” 则不会传入参数