inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

양방향 바인딩 (v-model)

부모,자식 컴포넌트 간 데이터 전달 시

412

Huibeom Kim

작성한 질문수 1

0

안녕하세요, 컴포넌트 간 데이터 전달 시, props 와 emit 을 이용한다고 말씀하셨습니다.

 

여기서 부모 컴포넌트에서 자식 컴포넌트로 반응형 데이터를 전달하게되면 자식 컴포넌트에서 그 반응형 데이터를 변경 시 같은 반응형 데이터를 참조하는 부모 컴포넌트도 값 바뀔텐데요, 이 때도 자식 컴포넌트에서 emit 을 정의하고 부모컴포넌트에서 해당 이벤트를 처리하게 해야할까요?

예를 들어 아래와 같은 식입니다.
부모 vue 에선,

<ChildView :childObj="refObj"></ChildView>

const refObj = ref({
  name: 'jack',
  deepObj: {
    deepName: 'kim'
  }
})

이렇게 refObj 반응형 변수를 생성하고 자식 props 로 넘기구요,

자식 vue 에선,

<p>{{ childObj.name }}</p>

const props = defineProps({
  childObj: Object
})

이런식으로 이용하는 방법입니다.

 

이렇게되면 childObj.name = '다른 이름'

과 같이 변경하면 부모 vue 의 refObj.value.name 도 같이 반응하게 되니까요. 이러면 emit과 이벤트 처리 코드를 따로 작성할 필요가 없어지겠구요.

 

이러한 방법으로 부모 자식간 데이터를 전달해도 될까요? 문제점이 있을까요?

 

vue.js

답변 1

0

짐코딩

안녕하세요.

부모에서 자식컴포넌트로 넘긴 Props은 자식에서 말고 부모로 이벤트를 방출(emit)하여 부모에서 수정하는 것을 권장드립니다.

강의를 모두 수강하시면 강의에서도 해당 내용을 언급하고 있습니다.

0

Huibeom Kim

네, 강의에서 그렇게 짚어주신 내용이 있어서 해당 질문을 드린 것인데요,
이 경우 문제점이 무엇일까요? 기능상 문제는 없으나, 데이터 변경에 대한 추적, 관리가 어려워서 emit 을 이용한 처리를 권장하시는 것일까요?

0

짐코딩

넵, 맞습니다~!

npm init vue@3.1.9

0

41

2

크롭 웹스토어 vue devtools 설치 관련

0

42

1

snippets 작성하는 부분 설명이 있었나요?

0

49

2

computed 의 set 함수를 통해 const 변수에 값을 담는 부분

0

55

2

소스 공유 어디서 해야하는지 궁금합니다

0

61

2

component 등록과 사용

0

58

2

강의교안

0

56

2

eslint 룰 관련 질문이 있습니다.

0

64

2

npm init -y 명령어 실행에 관한 질문

0

155

2

volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.

0

168

2

깊은 감시자 질문

0

88

2

정리된 내용

0

155

2

화면이 왜 이렇게 뜨는걸까요?

0

186

2

왜 다르게 뜰까요..?ㅠㅠ

0

155

2

npm init vue , npm create vue@latest 명령 오류

0

294

2

강의를 듣다보니 궁금한 점 질문드립니다.

0

141

2

watch강의 질문

0

153

1

강의 듣다가 질문드립니다.

0

120

1

이벤트 처리 부분 강의 실습

0

141

2

v-pre는 설명이 없나요?

0

154

2

AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다

0

146

1

개발자도구 Vue 탭 관련 문의

0

240

2

강의를 인텔리제이로 수업따라가도 되져?

0

178

2

API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?

3

280

2