- 首页
- 前端开发
- [Vue 警告]:缺少必需的道具:“productInfo"；
[Vue 警告]:缺少必需的道具:“productInfo"；
[英] [Vue warn]: Missing required prop: "productInfo"
本文介绍了[Vue 警告]:缺少必需的道具:“productInfo"；的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 Vue 还很陌生，所以这可能很明显，但我一定遗漏了一些东西.我不断收到错误消息:[Vue warn]: Missing required prop: "productInfo" 在我的 .vue 文件中.它说它是在 ProductSlider.vue 中找到的.
ProductSlider.vue
<模板><h2>{{ params.headerText }}</h2><div class="carousel-view"><轮播:navigation-enabled="true":min-swipe-distance="1":per-page="5"导航下一个标签="<i class='fas fa-3x fa-angle-right'></i>"navigation-prev-label="<i class='fas fa-3x fa-angle-left'></i>"><幻灯片v-for="产品中的产品":key="product.id"><产品:id="product.id":product-info="产品"/></幻灯片></轮播>
</模板><脚本>从'./Slider'导入滑块从'./Product'导入产品从 'vuex' 导入 {mapState, mapGetters}从 'axios' 导入 axios；导出默认{name: "滑块",成分: {产品},道具: {产品信息:{类型:对象，要求:真实}},
我删掉了 ProductSlider 代码的结尾，因为其余的代码很长而且无关紧要.
然后这是我的 Product.vue:
<产品><div class="img-container text-center"></a>
<h4 class="itemTitle">{{ productInfo.title }}</h4><div class="price-div"><div class="allPriceDescriptionPage">{{ productInfo.price }}</div>
<div class="btn_CA_Search buttonSearch gradient">添加到购物车
</a></产品></模板><脚本>导出默认{name: "产品",道具: {产品信息:{类型:对象，要求:真实，},},}
我在 props 中有 productInfo 所以我不知道为什么我总是收到这个错误.
解决方案
我想你混淆了 props 和子组件的 props，当你有:
您在子组件 Product 中定义了一个 prop productInfo，而不是在组件 ProductSlider 本身中，如果您定义了 prop productInfo 在 ProductSlider 中，那么你必须从父组件传下来，也就是你需要有 <ProductSlider :product-info="..."/> 每当使用 ProductSlider 时.
注意 <Product :product-info="product"/> 并不意味着您正在使用 productInfo、product-info 的值 是 Product 组件中定义的 prop 的名称.
我认为使用一个公平的类比是如果您将组件视为一个函数，props 是函数参数，并且在调用它们时需要提供所需的函数参数.
对于您的情况，为了消除错误，您可以简单地从 ProductSlider 组件中删除 productInfo 道具，因为它没有在该组件中使用.
I'm fairly new to Vue so this may be obvious, but I must be missing something. I keep getting the error: [Vue warn]: Missing required prop: "productInfo" in my .vue file. It says its found in 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
}
},
I chopped off the end of the ProductSlider code because the rest is very long and irrelevant.
And then here is my 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 in the props so I'm not sure why I keep getting this error.
解决方案
I think you confused props and the child component's props, when you have:
<Product
:id="product.id"
:product-info="product"/>
You have a prop productInfo defined in the child component Product, not in the component ProductSlider itself, and if you define prop productInfo in ProductSlider, then you have to pass it down from the parent component, that is you need to have <ProductSlider :product-info="..."/> whenever ProductSlider is used.
Notice <Product :product-info="product"/> doesn't mean you are using the value of productInfo, product-info is the name of prop that's defined in Product component.
I think a fair analogy to use is if you think of your component as a function, props are function parameters, and required function parameters need to provided when they are called.
For your case, to eliminate the error, you can simply remove the productInfo prop from ProductSlider component since it's not used in that component.
这篇关于[Vue 警告]:缺少必需的道具:“productInfo"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
