vue.js - 如何在 Vue.js 中正确地将 props 数据传递给另一个组件

Question

我正在尝试创建一个简单的卡片组件 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>

CustomCard.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"
                

如果我传递 Prop ，我会得到一个错误:[Vue warn]: The data property "cardImage"is already declared as a prop.请改用 prop 默认值。

所以我暂时把它注释掉了。

---

我已经在 index.js 中全局注册了 CustomCard.vue:

Answer 1

您的组件没有插槽，因此没有理由包含任何内容。

在我看来你只需要

<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 {}
  }
}