Vue.js 부모데이터를 자식컴포넌트로 - Props

- Props

1)데이터는 한 곳에 보통 보관한다 (App.vue 같은곳) 그리고 필요하면 가져다 쓴다.

2)v-bind (축약은 :)를 이용해 이름 : "props할 데이터" 형식으로 넘겨준다.

3)props받은 컴포넌트쪽에 props등록을 해준다. 받은데이터이름 : 자료형인데 자료형은 디버깅용이라 틀려도 되지만

맞춰주도록 하자

......
<ModalPopup v-bind:oneroom="oneroom" :roomNumber="roomNumber" :modal="modal"></ModalPopup>
  <!-- 혹은 v-bind는 축약 가능-->
    <div class="menu">
      <a v-for="(a,i) in 메뉴들" :key="i">{{ a }}</a>
    </div>
<DiscountBanner></DiscountBanner>
<CardList :oneroom="oneroom"></CardList>
.......
export default {
  name: 'App',
  data(){
    return{
      modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false
      alert:[0,0,0],
      price1 : 60,
      price2 : 70,
      price3:80,
      prices:[60,70,80],
      스타일 : 'color:blue',
      products: ["은평구원룸",'천호동원룸','마포구원룸'],
      메뉴들 : ["Home","Shop","About"],
      images:["room0.jpg","room1.jpg","room2.jpg"],
      oneroom:data,
      roomNumber:0,
      //import 해온것
      


    }
  },
  .....

  export default {
      name:'CardList',
      props:{
        oneroom:Object,
        //props받은 데이터이름 : 자료형

      },

- Component

메뉴빼고 전부 컴포넌트화

App.vue 밑에 ModalPopup, DiscountBanner, CardList 라는 이름으로 만든 vue파일들을 등록했다.

1)ModalPopup, DiscountBanner, CardList 라는 이름으로 vue파일로 컴포넌트를 만든다.

2)각 파일안에 name등록을한다.

3)App.vue 에서 import해온다.

4)App.vue의 component에 등록을한뒤 사용한다.

App.vue
......
<ModalPopup v-bind:oneroom="oneroom" :roomNumber="roomNumber" :modal="modal"></ModalPopup>
  <!-- 혹은 v-bind는 축약 가능-->
    <div class="menu">
      <a v-for="(a,i) in 메뉴들" :key="i">{{ a }}</a>
    </div>
<DiscountBanner></DiscountBanner>
<CardList :oneroom="oneroom"></CardList>
......

<script>

import data from './assets/data'
import DiscountBanner from './DiscountBanner.vue'
import ModalPopup from './ModalPopup.vue'
import CardList from './CardList.vue'
// import {} from ~

........

  components: {
    DiscountBanner:DiscountBanner,
    ModalPopup:ModalPopup,
    CardList:CardList,
    // 똑같으면 하나로 축약가능 DiscountBanner하나로
  }
}
</script>

App.vue

0.00MB

CardList.vue

0.00MB

DiscountBanner.vue

0.00MB

ModalPopup.vue

0.00MB

각 소스코드 파일 참고해보자, 참고로 props 까지는 전부 사용했지만  (부모->자식)

 

역으로 자식->부모로 데이터를 건드리는쪽은 건들기 전 코드이다.