인프런 커뮤니티 질문&답변

저번에도 비슷한 질문을 했었는데 해주신 답변이

안녕하세요, "v-on:이벤트명"의 대상으로는 해당 컴포넌트의 메서드 이름이 올 수 있다고 보시면 됩니다. logText() 형태가 아니라 logText로 써주셔야 합니다 :)

였습니다

근데

case 1)

<button @click="this.message+='!'">{{ this.message }}</button>

-> TypeError: Cannot read properties of null

case 2)

<button @click="message+='!'">{{ this.message }}</button>

--> 정상적으로 '!'가 뒤에 추가됨

case 3)

<button @click="addMessage">{{ this.message }}</button>

--> 정상적으로 '!'가 뒤에 추가됨

case 4)

<button @click="addMessage()">{{ this.message }}</button>

--> 정상적으로 '!'가 뒤에 추가됨

case 5)

<button @click="this.addMessage">{{ this.message }}</button>

--> 정상적으로 '!'가 뒤에 추가됨

case 6)

<button @click="this.addMessage()">{{ this.message }}</button>

-> TypeError: Cannot read properties of null

예시가 길었습니다!

그래서 질문입니다

1) v-on:click ="" 내부에서 this.메서드() 하면 this가 null 취급을 받는데 this.메서드 하면 this가 null 취급을 안 받는 이유가 뭔가요?

2) 그럼 왜 {{ this.message }} 의 this는 null 취급을 안 받나요?

3) 그래서 v-on:click="" 안에는 함수 참조가 들어가는 건가요 아니면 함수 호출문이 들어가는 건가요? case3, case4를 보면 함수 참조, 함수 호출문 둘다 들어갈 수 있는데 또 case 5, case6을 보면 모르겠습니다.