Vue.js에서 소품 데이터를 다른 컴포넌트에 올바르게 전달하는 방법

Vue.js에서 소품 데이터를 다른 컴포넌트에 올바르게 전달하는 방법

간단한 카드 컴포넌트 CustomCard.vue를 생성하여 HomeComponent에서 재사용하려고 합니다.지정된 데이터가 포함된 vue 페이지에 루프를 생성하여 필요한 데이터를 저장했습니다.cards: []

왜 안 되는지 모르겠어요.페이지에는 3개의 요소가 표시되지만 이 요소들은 컴포넌트의 디폴트값으로 표시됩니다.cards:[].

홈 컴포넌트vue:

...
<custom-card v-for="n in cards" :key="n">
   <img :src="n.cardImage" alt="">
   <p>{{n.cardDesc}}</p>
</custom-card>
...
<script>
  export default {
     data() {
        return {
           cardImage: "",
           cardDesc: "",
           cards: [
             {id: "1", cardImage: "../src/assets/img1.jpg", cardDesc: "some description 1"},
             {id: "2", cardImage: "../src/assets/img2.jpg", cardDesc: "some description 2"}, 
             {id: "3", cardImage: "../src/assets/img3.jpg", cardDesc: "some description 3"}
          ]
       }
     }
   }
</script>

커스텀 카드vue:

<template>
    <div>
        <img :src="cardImage" alt="">
        <p>{{cardDesc}}</p>
    </div>  
</template>


<script>
    export default {
        data () {
            return {
                cardImage: "../src/assets/default.jpg",
                cardDesc: "default description text"
            }
        }
        // props: ['cardDesc', 'cardImage']
    }
</script>

---

다음 값을 플레이스홀더로서 기본 컴포넌트 값으로 합니다(그래서 컴포넌트 데이터에 넣습니다).

cardImage: "../src/assets/default.jpg",
cardDesc: "default description text"
                

소품을 돌리면 오류가 발생합니다.[Vue warn]: The data property "cardImage" is already declared as a prop. Use prop default value instead.

그래서 일단 댓글을 달았어요.

---

CustomCard.vue를 index.js로 글로벌하게 등록했습니다.

컴포넌트에는 슬롯이 없기 때문에 콘텐츠를 포함할 필요가 없습니다.

내가 보기엔 넌 그냥...

<custom-card v-for="card in cards" :key="card.id"
             :card-desc="card.cardDesc"
             :card-image="card.cardImage" />

주의:key는 반복 가능한 각 요소의 실제 고유 식별자로 설정됩니다.

---

물론 코멘트를 해제해야 합니다.props선언 및 충돌 제거data컴포넌트에서 키를 가져옵니다.에러 메시지에 기재되어 있듯이, 디폴트치를 설정할 수도 있습니다.

export default {
  props: {
    cardDesc: {
      type: String,
      default: 'default description text'
    },
    cardImage: {
      type: String,
      default: '../src/assets/default.jpg'
    }
  },
  data () { // probably don't even need a data property
    return {}
  }
}

언급URL : https://stackoverflow.com/questions/48000050/how-to-pass-the-props-data-to-another-component-correctly-in-vue-js