작성
·
336
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과 이벤트 처리 코드를 따로 작성할 필요가 없어지겠구요.
이러한 방법으로 부모 자식간 데이터를 전달해도 될까요? 문제점이 있을까요?
네, 강의에서 그렇게 짚어주신 내용이 있어서 해당 질문을 드린 것인데요,
이 경우 문제점이 무엇일까요? 기능상 문제는 없으나, 데이터 변경에 대한 추적, 관리가 어려워서 emit 을 이용한 처리를 권장하시는 것일까요?