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

eg2data님의 프로필 이미지

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Events

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

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을 사용한 것을 확인할 수 있습니다.

eg2data님의 프로필 이미지

작성한 질문수

질문하기