[Vue 警告]：缺少必需的道具：“productInfo”

我对 Vue 相当陌生，所以这可能是显而易见的，但我一定错过了一些东西。我不断收到错误：[Vue warn]: Missing required prop: "productInfo"在我的 .vue 文件中。它说它在 ProductSlider.vue 中找到。

产品滑块.vue

    <template>
  <div
    id="recommendedProducts">
    <h2>{{ params.headerText }}</h2>
    <div
      class="wrapper">
      <div class="carousel-view">
        <carousel
          :navigation-enabled="true"
          :min-swipe-distance="1"
          :per-page="5"
          navigation-next-label="<i class='fas fa-3x fa-angle-right'></i>"
          navigation-prev-label="<i class='fas fa-3x fa-angle-left'></i>">
          <slide
            v-for="product in products"
            :key="product.id">
            <Product
              :id="product.id"
              :product-info="product"/>
          </slide>
        </carousel>
      </div>
    </div>
  </div>
</template>

<script>
  import Slider from './Slider'
  import Product from './Product'
  import {mapState, mapGetters} from 'vuex'
  import axios from 'axios';

  export default {
    name: "Slider",
    components: {
      Product
    },
    props: {
      productInfo: {
        type: Object,
        required: true
      }

    },

我砍掉了 ProductSlider 代码的末尾，因为其余部分非常长且无关紧要。

然后这是我的 Product.vue：

<template>
  <Product>
    <div class="img-container text-center">
      <a
        :href="productInfo.href"
        class="handCursor"
        tabindex="0">
        <img
          v-if="productInfo.imgOverlay"
          :src="productInfo.imgOverlayPath"
          :alt="productInfo.title"
          :aria-label="productInfo.title"
          border="0"
          tabindex="-1">
        <img
          :src="productInfo.imgURL"
          :alt="productInfo.title">
      </a>
    </div>
    <h4 class="itemTitle">{{ productInfo.title }}</h4>
    <div class="price-div">
      <div class="allPriceDescriptionPage">{{ productInfo.price }}</div>
    </div>
    <a
      href="#"
      tabindex="0"
      name="instantadd">
      <div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
    </a>
  </Product>
</template>

<script>
  export default {
    name: "Product",
    props: {
      productInfo: {
        type: Object,
        required: true,
      },
    },
  }
</script>

I have productInfo在道具中，所以我不确定为什么我不断收到此错误。

我想你很困惑props和子组件的props， 当你有：

<Product
  :id="product.id"
  :product-info="product"/>

你有一个道具productInfo在子组件中定义Product，不在组件中ProductSlider本身，如果你定义 propproductInfo in ProductSlider，那么你必须将它从父组件传递下来，也就是说你需要有<ProductSlider :product-info="..."/>每当ProductSlider用来。

Notice <Product :product-info="product"/>并不意味着您正在使用的值productInfo, product-info是的名字prop这是定义在Product成分。

我认为一个合理的类比是如果你将你的组件视为一个函数，props为函数参数，需要提供函数参数当他们被召唤时