vue // 모달방식

  <div>

    <!-- 모달맨위에 -->

    <div class="black-bg" v-if="state.modal.modal1 == true">

      <div class="white-bg">

        <h4>상세페이지</h4>

        <p>상세페이지내용임</p>

        <button v-on:click="state.modal.modal1 = false">close</button>

      </div>

    </div>

    <h1>hello App.vue</h1>

    <router-view

      @openModal="state.modal.modal1 = true"

      :modal="state.modal"

    ></router-view>

    <button v-on:click="test()">axios test</button>

    <button type="button" class="btn btn-primary">부트스트랩 테스트</button>

    <div class="sassTest">

      <p>sassTest_blue</p>

    </div>

    <button v-on:click="state.modal.modal1 = true">modal1</button>

  </div>

 

 

이렇게 모달창을 맨위에 올려두고

 

router로 연결된 컴포넌트에

 

 

<template>

  <div>

    <p>hello Main from router</p>

    <button @click="$emit('openModal')">모달1 오픈</button>

  </div>

</template>

<script>

export default {

  props: {

    modal: Object,

  },

  setup(props) {

    console.log(props.modal.modal1);

  },

};

</script>

<style></style>

이렇게 emit으로 데이터 보내줌

 

 

App.vue에서

    <router-view

      @openModal1="state.modal.modal1 = true"

      :modal="state.modal"

    ></router-view>

openModal1이라는 데이터를 받으면

모달창을 열게해주는거임.