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

【问题标题】：[Vue warn]: Missing required prop: "productInfo"[Vue 警告]：缺少必需的道具：“productInfo”
【发布时间】：2019-04-23 01:23:15
【问题描述】：

我对 Vue 还很陌生，所以这可能很明显，但我一定遗漏了一些东西。我不断收到错误消息：[Vue warn]: Missing required prop: "productInfo" 在我的 .vue 文件中。它说它在 ProductSlider.vue 中找到。

ProductSlider.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>

我在道具中有productInfo，所以我不知道为什么我不断收到这个错误。

【问题讨论】：

我没有看到您在 ProductSlider.vue 组件的任何地方使用 productInfo。你真的需要它在组件中吗？如果你需要它，你是否从父组件传递了道具？
在Product元素的for循环中使用。
productInfo 是在 ProductSlider 中的一种方法中生成的。它不会从父母那里传下来。但它需要传递给它的孩子Product。
在 Product.vue 中，你有
这是你已经在Product 中声明的子组件的道具。只需删除ProductSlider 中的productInfo 属性，我想你混淆了props 的用法-

标签： vue.js

【解决方案1】：

我认为你混淆了props 和子组件的props，当你有：

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

你在子组件Product中定义了一个prop productInfo，而不是在组件ProductSlider本身中，如果你在ProductSlider中定义了prop productInfo，那么你必须从父组件，即在使用ProductSlider 时需要有<ProductSlider :product-info="..."/>。

注意<Product :product-info="product"/> 并不意味着您使用的是productInfo 的值，product-info 是prop 的名称，它在Product 组件中定义。

我认为使用一个公平的类比是如果您将组件视为一个函数，props 是函数参数，并且需要在调用时提供所需的函数参数。

对于您的情况，为了消除错误，您可以简单地从 ProductSlider 组件中删除 productInfo 属性，因为它没有在该组件中使用。

【讨论】：