我如何在Vue2中使用Props将数据传递到组件？

Question

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

因此，我在components文件夹内创建了一个Component（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>

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

然后，在components文件夹中，我有一个名为CafeHeader的组件，我想在其中使用先前导入到“ Cafe Details”页面的数组中的数据；

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

export default {
  name: "test",
  props: {
      cafes: {
          type: Array,
          required: true
      }
  },
  data() {
      return {
          isActive: false,
          active: false
      };
  },
  methods: {}
};

Answer 1

您正在定义一个名为clubs的数据属性，而没有使用它，而是使用它的值的名称，只需将其修改为以下内容即可：

    data() {
        return {
            cafes: cafes
        };
    },

或

    data() {
        return {
            cafes
        };
    },