Question

我正在尝试创建一个简单的卡片组件 CustomCard.vue ，并在指定数据的 HomeComponent.vue 页面上重复使用它，所以我创建了一个循环并将所需数据放入cards: []

我不知道为什么它不起作用。我可以看到页面上的3个元素，但它们显示的是组件的默认值，而不是从cards:[]获取数据。

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

如果我将道具传出，我会收到错误：[Vue warn]: The data property "cardImage" is already declared as a prop. Use prop default value instead.

所以我暂时评论它。

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

如何在Vue.js

HomeComponent.vue：

CustomCard.vue：

1 个答案: