부모 컴포넌트에서 자식 컴포넌트 버튼 연결 질문

[김하연]

모달 오픈 버튼 연결을 강의와 다르게  methods로 함수를 만들어서 오픈 하였는데 
자식 컴포넌트로 보내면 어떻게 조정을 해야할지 모르겠습니다. 

부모 컴포넌트 

<template>
  <div id="container">
    <div class="menu">
      <a v-for="(item, i) in menu" :key="'item' + i">{{item}}</a>
    </div>
    <main id="contents" class="home_page">
      <section class="home_product_sec">
        <div class="room_wrap">
          <h2 class="list_ttl">상품 리스트</h2>
          <div class="room_list">
            <div class="room" v-for="(item, index) in rooms" :key="index">
              <h4>{{item.address}}</h4>
              <a :href="item.link" class="thumb_area">
                <figure class="thumb" :style="background-image: url('${item.img}')"></figure>
              </a>
              <p>{{numSet(item.price)}}원</p>
              <button @click="reportBtn(index)">허위매물신고</button>
              <span>신고수 : {{item.report}}</span>
              <button @click="[modalOpen(),listNum = index]">상세보기</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
  <Discount/>
  <ListModal :roomsData="rooms" :listNumData="listNum" :modalOpen="modalOpen"/>
</template>

<script>

  import products from './assets/static/products';
  import Discount from './components/discountBanner.vue';
  import ListModal from './components/ListMdoal.vue';

  export default {
    name: 'App',
    components: {
      Discount,
      ListModal,
    },
    data() {
      return {
        listNum:0,
        menu: ['Home', 'Shop', 'About'],
        rooms:  products,
        isShow:false,
      }
    },
    methods: {
      numSet(val) {
        if (!val) return (val = '');
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      },
      reportBtn(index) {
        this.rooms[index].report += 1;
      },
      modalOpen() {
        this.isShow = !this.isShow;
      }
    }
  }
</script>

자식컴포넌트 

<template>
   <div class="modal_wrap" :class="{is_show : isShow}">
    <div class="modal">
      <button class="close" @click="isShow = false"></button>
      <div class="modal_head">
        <p class="ttl">{{rooms[listNum].address}}</p>
      </div>
      <div class="modal_body">
        <p class="txt">{{numSet(rooms[listNum].price)}}</p>
      </div>
      <div class="modal_foot">
        <div class="btn_area">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'ListModal',
  props: {
    roomsData: Array,
    listNumData: Number,
    modalOpen: Boolean,
  },
  data() {
    return {

    }
  }
}

 

[codingapple]

등록시 타입은 boolean 말고 Function으로 하고

자식컴포넌트안에서 modalOpen() 맘대로 쓰면 됩니다

[글쓴이]

글