[Vue] props (v-bind)

props

{{ 데이터바인딩 }} 은 밑에 script 에 데이터가 있어야 가능하다.

App.vue 에 있는 데이터들을 ModalDetail.vue 컴포넌트에서 사용하려면 props를 사용해야 한다.
보통 App.vue에 모든 데이터를 몰아놓고 props를 이용해 필요한 곳에 가져다 쓴다.

• 부모 컴포넌트 : App.vue
• 자식 컴포넌트 : ModalDetail.vue

자식 컴포넌트는 부모가 가지고 있는 데이터를 가져다 쓰고싶을 경우 props 문법으로 전송을 해야 한다.
자식 컴포넌트에 있는 데이터를 부모 컴포넌트에서 가져다 쓰려면 props 문법으로 불가능하다.
데이터를 만들때는 최상위 컴포넌트에 만드는게 좋다.

props 문법 step

1. 데이터 전송
2. 등록
3. 사용

1. 데이터 전송

App.vue

<!--
<ModalDetail v-bind:데이터이름="데이터이름" />
<ModalDetail :데이터이름="데이터이름" />
-->

<ModalDetail :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />

<!-- props 보내는 여러가지 방법 -->
<Discount :데이터이름="[1,2,3]" />
<Discount :데이터이름="{ age:20 }" />
<Discount :데이터이름="100" />
<Discount 데이터이름="안녕하쇼" />

2. 등록

ModalDetail.vue
이름과 데이터 형식을 등록해준다.
데이터 형식은 디버깅용이기 때문에 잘못 써도 에러가 나진 않는다.

<script>
export default {
  name: 'ModalDetail',
  props: {
    원룸들: Object, // Number, String, Array, Boolean
    누른거: Number,
    모달창열렸니: Number,
  }
}
</script>

3. 사용

<template>
  <div class="black-bg" v-if="모달창열렸니==1">
    <div class="white-bg">
      <img :src="원룸들[누른거].image" class="room-img">
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>{{ 원룸들[누른거].content }}</p>
      <p>{{ 원룸들[누른거].price }}</p>
      <button @click="모달창열렸니=0">닫기</button>
    </div>
  </div>
</template>

에러가 발생함 : props로 전달받은 데이터는 수정할 수 없다.

원룸 리스트 component로 나누기

<template>
<!-- <ProductCard v-for="(a,i) in 원룸들" :key="i" :a="a" :i="i"  /> -->
<ProductCard v-for="(a,i) in 원룸들" :key="i" :원룸="원룸들[i]" />
</template>

<script>
import ProductCard from './components/ProductCard.vue';

...

components: {
  ProductCard : ProductCard,
}
</script>

ProductCard.vue

<template>
  <div>
    <img :src="원룸.image" class="room-img">
    <h4 @click="모달창열렸니=1; 누른거=i;">{{ 원룸.title }}</h4>
    <p>{{ 원룸.content }}</p>
    <p>{{ 원룸.price }}원</p>
  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    // 원룸들: Object,
    // a: Object,
    // i: Number,
    원룸: Object,
  }
}
</script>