23.06.30 15:47 작성
·
513
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요
TheView.vue, Username.vue, LabelInput.vue 순으로 각각 부모/자식 관계를 맺고 있습니다.
자식 컴포넌트에서 부모 컴포넌트 데이터 변경이 필요할 때 emits으로 event를 올리면,
부모 컴포넌트에서 해당 event에 method를 연결시켜 데이터 변경을 처리한다고 이해했습니다.
그런데 컴포넌트가 3개가 되니, 관계가 좀 복잡해보입니다.
제가 이해가 가지 않는 부분은, 아래 Username.vue에 있는
@update:model-value="value => $emit('update:firstname', value)"
이 부분입니다.
Username.vue의 자식 컴포넌트인 LabelInput.vue에서 보내온 이벤트인 update:model-value에 엮인 method에서, Username.vue 내에 존재하는 반응형 데이터 조작 (ex. @update:model-value="event => username = event.target.value")가 아니라, Username.vue의 부모 컴포넌트인 TheView.vue로 event를 emits하는 코드만 삽입되어 있습니다.
이 때, Username.vue에서는 단순히 LabelInput.vue의 emit이 TheView.vue에 도달할 수 있는 통로 정도의 역할만 했다고 해석하면 될까요?
TheView.vue
<template>
<Username v-model:firstname="firstname" />
</template>
<script>
const firstname = ref('')
</script>
Username.vue
<template>
<LabelInput :model-value="firstname" @update:model-value="value => $emit('update:firstname', value)"
</template>
<script>
props: ['firstname']
emits: ['update:firstname']
</script>
LabelInput.vue
<template>
</template>
<script>
props: ['modelValue']
emits: ['update:modelValue']
setup(props, { emit }) {
emit('update:modelValue', value)
}
</script>
답변 1
1
2023. 07. 02. 13:26
안녕하세요 :)
통로역할? 음...🤔 우선 통로역할을 했다고 할 수 있을 거 같아요~!
그리고 Username.vue
컴포넌트에서는 LabelInput.vue
컴포넌트와 다르네 다중 v-model
을 사용한 것을 확인할 수 있습니다.