如何使用 Vue2 中的 Props 将数据传递给组件？答案

【问题标题】：How do I pass data to a component using Props in Vue2?如何使用 Vue2 中的 Props 将数据传递给组件？
【发布时间】：2020-10-07 01:29:48
【问题描述】：

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

因此，我在组件文件夹中创建了一个组件 (CafeHeader.vue)。我正在尝试使用 Props 将数组中的数据（在我的 Cafe Details 页面上使用）传递给该组件。但是，我似乎无法让它工作。

我的咖啡馆详情页面的模板如下：

<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 Details 页面的数组中的数据；

<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，它会渲染来自 cafes.js 的数据但是，它是列表中的每个咖啡馆，我只想要一个咖啡馆。

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

【问题讨论】：

您的计算属性中有错字。你的变量CafeTitle 是大写的，但你在foreach 中写了cafeTitle。您还可以将计算属性缩短为单行 return this.cafes.filter(cafe => cafe.name === "Apollo Cafe")。
我看到您的 JavaScript 代码周围没有任何 <script> 标记。这是复制/粘贴错误，还是在您的项目中出现这种情况？
我在我的项目中使用脚本标签，只是在 JS 周围没有它们
很遗憾，我不知道还有什么可能。正如我所料，将您的代码复制/粘贴到本地项目中。没有任何错误。
谢谢@Hiws 非常感谢您的指导。我更接近一点，因为我的组件正在将数组中所有咖啡馆的标题而不是计算属性呈现为仅基于其名称的特定咖啡馆。

标签： javascript arrays vue.js vuejs2 vue-cli

【解决方案1】：

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

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

【讨论】：