• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

v-on:click= " " 내부의 this는 무엇을 가리키나요? 그리고 안에는 뭐가 들어가나요?

23.01.13 14:20 작성 조회수 180

1

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

안녕하세요, "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을 보면 모르겠습니다.

 

답변 1

답변을 작성해보세요.

0

안녕하세요, 자세하게 질문을 잘 작성해 주셨네요. 질문하신 내용들을 보면 함수 호출의 결과와 함수 값을 참조하는 것의 차이를 정확히 이해하시는게 중요할 것 같습니다.

아래 코드가 어떻게 다른지 한번 찾아보시면 좋을 것 같아요 :)

<button onclick="showAlert"></button>
<button onclick="showAlert()"></button>

그리고 템플릿 표현식 안에서의 this는 해당 컴포넌트를 가리킵니다.