[Vue] bootstrap 하위 컴포넌트 모달창 상위 컴포넌트에서 열기

하위 컴포넌트 모달창을 상위 컴포넌트에서 열어야 할 상황이 생겼다. 

 

내 뷰의 구조는 오른쪽이다.

원하는 흐름은 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();
},