-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
부모,자식 컴포넌트 간 데이터 전달 시
24.05.20 18:53 작성 조회수 88
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과 이벤트 처리 코드를 따로 작성할 필요가 없어지겠구요.
이러한 방법으로 부모 자식간 데이터를 전달해도 될까요? 문제점이 있을까요?
답변을 작성해보세요.
0
짐코딩
지식공유자2024.05.21
안녕하세요.
부모에서 자식컴포넌트로 넘긴 Props은 자식에서 말고 부모로 이벤트를 방출(emit)하여 부모에서 수정하는 것을 권장드립니다.
강의를 모두 수강하시면 강의에서도 해당 내용을 언급하고 있습니다.
![Huibeom Kim님의 프로필](https://cdn.inflearn.com/public/main/profile/default_profile.png?w=48)
Huibeom Kim
질문자2024.05.21
네, 강의에서 그렇게 짚어주신 내용이 있어서 해당 질문을 드린 것인데요,
이 경우 문제점이 무엇일까요? 기능상 문제는 없으나, 데이터 변경에 대한 추적, 관리가 어려워서 emit 을 이용한 처리를 권장하시는 것일까요?
답변 1