사용자 정의 v-model, 그리고 3개 이상의 component에서 데이터 이동 시

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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>