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

안녕하세요, 컴포넌트 간 데이터 전달 시, 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과 이벤트 처리 코드를 따로 작성할 필요가 없어지겠구요.

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