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

부모.vue
<template>
  <AnswerForm
    :postSynopsisDetail="postSynopsisDetail"
  />
</template>

<script>
  ...
  methods : {
    postSynopsisDetail(synopsis) {
      console.log(this) // 자식에서 호출해도 부모
      // 인스턴스로 나오네?
    },
  } 
},

AnswerForm.vue
<template>
  <v-btn
    @click="postSynopsisDetail(item)"
    icon="mdi-information-outline"
  ></v-btn>
</template>

<script>
props: {
  postSynopsisDetail: Function,
},

부모 컴포넌트에서 선언한 postSynopsisDetail 이란 함수를 자식 컴포넌트에 props로 전달했습니다. 그래서 자식 컴포넌트에서 호출했는데 this 가 부모 컴포넌트? 인스턴스? (뭐라고 말해야 되나요?) 를 가리키더라구요...

그래서 궁금합니다.

제가 알기로는 자바스크립트 함수 내부의 this는 화살표 함수가 아니라면 호출 방식(일반 함수, 메서드, 이벤트핸들러)에 따라 결정됩니다. 그렇다면 자식 컴포넌트에서 v-btn을 클릭하면서 호출되는 postSynopsisDetail 은 무엇으로 호출되는 건가요?

이벤트 핸들러로 호출되는 거면 this는 이벤트를 바인딩한 요소 v-btn을 가리켜야 된다고 생각하고

메서드로 호출됐다면 this는 해당 메서드를 호출한 객체를 가리키니까 자식 인스턴스?컴포넌트? 를 가리킬 거 같은데

부모 컴포넌트?인스턴스?를 가리키는 이유가 뭔가요?