props로 함수를 전달했을 때의 질문입니다!
632
投稿した質問数 25
부모.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는 해당 메서드를 호출한 객체를 가리키니까 자식 인스턴스?컴포넌트? 를 가리킬 거 같은데
부모 컴포넌트?인스턴스?를 가리키는 이유가 뭔가요?
回答 1
0
안녕하세요 :)
this는 말씀하신 것처럼 대부분 호출하는 방법에 의해 결정됩니다 🙂
하지만 메소드에서 this가 현재 컴포넌트 인스턴스(this) 가리키는 이유는 Vue의 스팩이라고 보시면 될 것 같습니다.
정확히 말씀드리면 Options API(methods, data ...) 방식으로 개발했을 때 발생되는 현상입니다.
Composition API 방식으로 사용하여 개발을 진행하신다면 원하는 결과를 얻을 수 있을 거에요 :)
eslint 세팅 질문 드립니다.
0
1711
2
컴포넌트 이벤트 전파 관련 질문입니다
0
498
1
app-level의 provide한 값을 새로고침시 정상적으로 inject하지 못함.
1
526
1
this.$refs에 값이 들어가는 시점이 언제인가요?
0
830
1
npm run dev 설치중
0
617
2
reactive vs ref... 굳이 reactive를 사용하는 이유가 뭔가요?
1
1945
1
dummy api axios 호출시 cors 에러
0
534
1
19:17 emit 관련 질문
0
568
1
reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
0
568
1
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
0
577
1
template내 자바스크립트 표현식 평가 시점은 언제인가요?
0
344
1
App.vue 물결 표시 제거 방법
0
374
1
v-if 질문입니다!
0
555
1
ref vs reactive vs shallowRef
0
652
1
script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
1
668
1
이벤트 핸들러로 왜 일반 함수로는 작동이 안 되나요? + console.log도 인식이 안되요
0
343
1
Vue3 Composition API - computed
0
458
1
setup 함수내 문자열 관련 질문입니다.
0
344
2
v-on:click ="" 질문입니다
0
349
1
v-on:click="" 질문입니다
0
234
1
v-for에서 style을 사용하려 할 때
0
373
1
reactive와 computed 차이 질문
0
1108
1
emits사용 이유
1
449
1
eslint 오류표시 질문
0
500
1

