Vue에서 메서드를 호출하는 동안 괄호

Vue에서 메서드를 호출하는 동안 괄호

Vue에서는 왜 청취자를 둘 다와 함께 할당할 수 있습니까?()그리고 없이()?

new Vue({
  el: "#app",
  data: {
    userName: "Hello World!"
  },
  methods: {
    changeName: function(e){
      this.userName = "Name "+Math.random();
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <p> {{ userName }} </p>
  
  <!-- typing in both the input fields trigger changeName  -->
  
  <input @input="changeName()">
  <input @input="changeName">
  
</div>

위의 코드 스니펫에서는 양쪽 입력 필드의 입력 이벤트가 트리거됩니다.changeName괄호를 두르고 있음에도 불구하고.()그리고 한 명은 그렇지 않아

이것은 https://vuejs.org/v2/guide/events.html#Method-Event-Handlers에서 꽤 잘 설명되어 있습니다.

기본적으로 이벤트 핸들러는 다음 중 하나입니다.

• 다음과 같은 메서드 이름@input="changeName"
• 다음과 같은 유효한 Javascript 스테이트먼트@input="changeName()"또는@input="userName = 'Name '+Math.random()"

Vue는 자동으로 검사를 수행하여 어떤 경우인지 탐지합니다.

관심이 있는 경우는, 이 코어 코드를 https://github.com/vuejs/vue/blob/19552a82a636910f4595937141557305ab5d434e/dist/vue.js#L10086 에서 확인해 주세요.

var handlerCode = isMethodPath
  ? ("return " + (handler.value) + "($event)")
  : isFunctionExpression
    ? ("return (" + (handler.value) + ")($event)")
    : handler.value;

두 사례 모두 Vue에서 유효합니다.하지만 몇 가지 차이점이 있다.

견적: https://forum.vuejs.org/t/difference-when-calling-a-method-function-with-or-without-brackets/41764/4

@input="changeName"

메서드 이름만 이벤트핸들러로 바인드 할 경우 이벤트오브젝트는 첫 번째 인수로 이벤트핸들러에 전달됩니다.

@input="changeName()"

또는 실제 메서드콜을 이벤트핸들러로서 사용할 수도 있습니다.이를 통해 임의의 커스텀 인수를 메서드에 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50635404/parentheses-while-calling-a-method-in-vue