Question

我对Vue还是很陌生，所以这可能很明显，但是我必须缺少一些东西。我在我的.vue文件中不断收到错误：[Vue warn]: Missing required prop: "productInfo"。它说它是在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，所以我不确定为什么会不断收到此错误。

Answer 1

当您遇到以下情况时，我认为您将props和子组件的props混淆了：

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

您有一个在子组件productInfo中定义的道具Product，而不是在组件ProductSlider本身中定义，并且如果您在productInfo中定义了道具ProductSlider ，则必须将其从父组件传递下来，也就是说，每当使用<ProductSlider :product-info="..."/>时，都需要拥有ProductSlider。

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

如果您认为组件是一个函数，我认为可以使用一个合理的类比，例如，props是函数参数，并且需要在调用它们时提供必需的函数参数 。

对于您的情况，要消除该错误，您只需从productInfo组件中删除ProductSlider道具，因为该组件中未使用它。

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

1 个答案: