강의듣다가 헷갈려서 질문드립니다.
제가 이해하고 있는게 맞는지 궁금합니다.
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개만 되도 엄청 헷갈리네요. ㄷㄷ
Answer 1
1
안녕하세요! 🙂
네, 맞게 이해하셨어요.
굳이 한 가지 덧붙이면, set(value) → emit 구간이 "자식이 직접 props를 바꾸지 않고 부모에게 변경을 요청한다"는 Vue의 단방향 데이터 흐름 원칙을 지키기 위한 패턴이에요. computed의 get/set을 이렇게 활용하는 게 v-model을 컴포넌트에 연결할 때의 핵심이고요.
0
답변 감사합니다. 다행이네요.
부모1 - (부모1의 자식)자식1 (자식2의 부모) - 자식2
최상위 부모와 최하위 자식 사이에 자식이자 부모라면 computed get set을 활용 + v-model을 활용해야겠다 생각이 들었습니다.
질문드립니다.
0
29
0
unplugin-vue-components 질문드립니다.
0
32
2
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
27
1
질문드립니다.
0
28
2
라우터 인스톨 후 실행안됨
1
47
2
코드 자동 포매팅 질문
0
67
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
111
1
미리보기가 안됩니당...
0
68
2
unplugin-vue-components
0
79
2
TypeError 질문
0
49
1
v-model="show" :show="show" 같이 사용?
1
53
1
hash 모드 배포의 필요성?
0
59
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
97
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
63
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
69
2
중첩된 컴포넌트 문제
0
74
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
324
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
121
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2
This dependency was not found:
0
140
2