728x90
하위 컴포넌트 모달창을 상위 컴포넌트에서 열어야 할 상황이 생겼다.
내 뷰의 구조는 오른쪽이다.
원하는 흐름은 HouseListItem 하나를 클릭하면 해당 정보를 가진 modal창(HouseDetail)이 HouseList에서 열리는 것이다.
모달 on/off 상태를 저장할 변수를 설정하려고도 생각해봤지만 더 간단한 방법을 발견했다.
1. HouseListItem 각각을 클릭하면 HouseList로 $emit을 보낸다.
2. HouseList는 해당 이벤트가 발생하면 모달창을 여는 함수를 호출한다.
HouseListItem
클릭하면 selectHouse를 호출한다. selectHouse는 상위컴포넌트(HouseList)로 이벤트를 보낸다.
<b-card
no-body
@click="selectHouse(house.aptCode)">
</b-card>
<!-- 중략 -->
selectHouse(aptCode){
this.$emit("openModal");
}
HouseDetail
modal에 ref이름을 설정해놓는다.
<b-modal
id="house-detail-modal"
ref="modal"
>
</b-modal>
HouseList
house-list-item의 "openModal" 이벤트를 보고 있어야 한다.
house-detail에 ref 이름을 준다.
openModal 이벤트가 발생하면 동일한 이름의 method를 호출한다. 이 메소드에서 this.$refs.자식컴포넌트ref이름.$refs.모달ref이름.show();를 하면 된다.
<b-row>
<b-card-group
class="col-md-3"
v-for="(house, index) in houses"
:key="index">
<house-list-item
:house="house"
@openModal="openModal"/>
</b-card-group>
</b-row>
<house-detail ref="detailModal" />
<!-- 중략 -->
openModal() {
this.$refs.detailModal.$refs.modal.show();
},
'기록 > FRONTEND' 카테고리의 다른 글
[VSCode] vscode에서 eslint와 prettier 충돌 문제 (0) | 2022.05.30 |
---|---|
[Vue] Vuex (1) | 2022.05.28 |
[Vue] SFC(Single File Component) (0) | 2022.05.27 |
[Vue] Vue CLI(feat.NodeJS) (0) | 2022.05.26 |
[Vue] Router (1) | 2022.05.25 |
댓글