我正在尝试创建一个简单的卡片组件 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:
最佳答案
您的组件没有插槽,因此没有理由包含任何内容。
在我看来你只需要
<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 - 如何在 Vue.js 中正确地将 props 数据传递给另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48000050/