props

모달창 component화

• {{데이터바인딩}} 은 밑에 데이터가 있어야 가능함
• 데이터를 가져다 쓰는 방법이 있음: props
• 부모: App.vue
• 자식: Modal.vue
• 자식컴포넌트가 부모가 갖고 있는 데이터를 쓰려면 props로 데이터를 전송해야 함
• 부모도 쓰는 데이터라면 자식컴포넌트가 아닌 부모컴포넌트에 만들어두는 게 좋음

부모에서 데이터 전송

형식

<자식컴포넌트 :작명데이터이름="데이터이름" />

예시

<template>
  <TheModal :products="products" :clickWhat="clickWhat" :modalOpen="modalOpen" />
    <!-- products, clickWhat, modalOpen 보냄 -->
</template>

<script>
import oneromeData from './oneroom';
import TheModal from './TheModal.vue';

export default {
  name: 'App',
  data(){// 데이터 보관통
    return {
      products: oneromeData,
      modalOpen: false,
      clickWhat: 0,
    }
  },
  components: {
    TheModal,
  }
}
</script>

자식컴포넌트에서 등록(재정의)

• 자료형 종류는 첫글자 대문자
  형식

props: {
  작명: 자료형 종류,
}

예시

<script>
    export default {
        name: 'TheModal',
        props: {
            products: Array,
            clickWhat: Number,
            modalOpen: Boolean,
        }
    }
</script>

자식컴포넌트에서 사용

🔥props는 read-only이며 받아온 거 수정 금지

<template>
  <div class="black-bg" v-if="modalOpen">
    <div class="white-bg">
      <h4>{{ products[clickWhat].title }}</h4>
      <p>{{ products[clickWhat].content }}</p>
      <p>{{ products[clickWhat].price }}원</p>
      <p>신고 수: {{ products[clickWhat].report }}</p>
      <img :src="products[clickWhat].image">
    </div>
  </div>
</template>