인프런 커뮤니티 질문&답변
작성한 질문수
강의듣다가 헷갈려서 질문드립니다.
해결된 질문
작성
·
25
·
수정됨
0
제가 이해하고 있는게 맞는지 궁금합니다.
PostListView.vue
일단 PostMadal에 걸려있는
v-model="show"는 양방향
모달 버튼 클릭시 show.value = true로 세팅되고, props로 modelValue로 자식인 PostModal로 넘어감.
PostModal에서
위처럼 되어있는데요.
1.get()은 부모에서 전달된 show값 가져오기
2.set(value)는 자식에서 값 변경요청시 이벤트를 부모로 올려주고, 부모에서 값변경
3.부모에서 값 변경이 되었으니, 다시 자식의 get()이 실행되어 변경된 값 표출
여기까지 개념이해 된거 맞져?
---
PostModal과 AppModal의 관계
=> PostModal
=> AppModal
부모인 PostModal에서 v-model="show"
자식인 AppModal에서 props의 modelValue 값 가져옴.
만약 이전에 modal 클릭을 해서 true가 넘어와있다고 가정한 상태라면, 모달내 close버튼 클릭시
emit으로 PostModal쪽에 이벤트 올리고 false세팅 요청!
자식에서 show라는 값을 바꾸려는 시도 때문에 PostModal내
set(value)쪽이 실행되고,emit으로 다시 상위 부모인 PostListView의 값 false세팅 요청. PostModal의 get()실행되어 props.modelValue값 가져옴.
따라서 AppModal의 modelValue값은 false로 내려옴. 따라서 모달 안보임(v-if="modelValue"로 인해)
짐코딩님 제가 이해하고 있는게 맞을까여?
생각보다 뎁스가 2개만 되도 엄청 헷갈리네요. ㄷㄷ
퀴즈
Vue의 Transition 컴포넌트는 주로 무엇을 위해 사용될까요?
데이터 상태 관리
라우팅 처리
단일 요소 또는 컴포넌트의 등장/퇴장 애니메이션
서버 통신 관리
답변 1
1
안녕하세요! 🙂
네, 맞게 이해하셨어요.
굳이 한 가지 덧붙이면, set(value) → emit 구간이 "자식이 직접 props를 바꾸지 않고 부모에게 변경을 요청한다"는 Vue의 단방향 데이터 흐름 원칙을 지키기 위한 패턴이에요. computed의 get/set을 이렇게 활용하는 게 v-model을 컴포넌트에 연결할 때의 핵심이고요.
답변 감사합니다. 다행이네요.
부모1 - (부모1의 자식)자식1 (자식2의 부모) - 자식2
최상위 부모와 최하위 자식 사이에 자식이자 부모라면 computed get set을 활용 + v-model을 활용해야겠다 생각이 들었습니다.