如何在 Vue2 中使用 Props 将数据传递给组件?

Question

>我创建了一个.Vue 文件以显示咖啡馆的信息(咖啡馆详细信息页面(。但是，我想采用此详细信息页面的一部分并使其成为自己的组件，以便更有效地管理任何模板更新。

因此，我在组件文件夹中创建了一个组件(CafeHeader.vue(。我正在尝试使用 Props 将数组(在我的咖啡馆详细信息页面上使用(中的数据传递到此组件。但是，我似乎无法让它工作。

我的咖啡馆详细信息页面的模板如下：

<template>
<div>
<div v-for="cafe in activeCafe">
<CafeHeader v-bind:cafes="cafes" />
<div class="content">
<p>{{ cafe.cafeDescription }}</p>
</div>
</div>
</div>
</template>
<script>
import CafeHeader from "./../../components/CafeHeader";
import cafes from "./../../data/cafes"; // THIS IS THE ARRAY
export default {
data() {
return {
cafes: cafes
};
},
components: {
CafeHeader,
},
computed: {
activeCafe: function() {
var activeCards = [];
var cafeTitle = 'Apollo Cafe';
this.cafes.forEach(function(cafe) {
if(cafe.cafeName == cafeTitle){
activeCards.push(cafe);
}
});
return activeCards;
}
}
};
</script>

然后，在组件文件夹中，我有一个名为CafeHeader的组件，我想在其中使用之前导入到 Cafe 详细信息页面的数组中的数据;

<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
<script>
export default {
name: "test",
props: {
cafes: {
type: Array,
required: true
}
},
data() {
return {
isActive: false,
active: false
};
},
methods: {}
};
</script>

如果在 CafeHeader 组件中我有cafe in cafes，它确实渲染了咖啡馆的数据.js 但是，它是列表中的每个咖啡馆，我只想要一个咖啡馆。

<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>

Answer 1

该组件还需要在v-for上activeCafes

<template>
<div>
<div v-for="cafe in activeCafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>