为什么Vue `@click=“click”和`@click=“click()”的工作方式相同？

Question

请参阅这个最低限度的例子：

<template>
  <div>
    <!-- I understand that this works -->
    <button @click="click">Click</button>
    <!-- Why is this working? Does Vue has some kind of auto detection? -->
    <!-- If so, how does Vue detect it? -->
    <button @click="click()">Click</button>
  </div>
</template>

<script>
export default {
  methods: {
    click() {
      alert("Clicked!");
    }
  }
};
</script>

正如您所看到的，我有一个click方法可以简单地发出警告，并且我有两种不同的方法来绑定模板中的方法，为什么会发生这种情况呢？

Vue是如何在引擎盖下解析@click="click()"的？为什么这不立即调用click方法一次？

Answer 1

在这两种情况下，将调用单击函数，但区别是：

@click=“单击”

在这种情况下，调用单击函数并传递参数将是触发它的元素的作用域。

示例：

click(event) {
     //here you will receive event object by default
    }

@click="click()“

对于这种情况，允许您将自定义参数传递给，单击函数。

示例：

click(event) {
     //here you will receive event object is null, because intentionally you did not pass anything
    }