[Vue 警告]:缺少必需的道具
Posted
技术标签:
【中文标题】[Vue 警告]:缺少必需的道具【英文标题】:[Vue warn]: Missing required prop 【发布时间】:2019-11-11 20:10:33 【问题描述】:我正在使用Nuxt
并尝试创建Heading
组件。当尝试使用这个组件时,它会正确呈现h1
标签,但我面临的问题是在控制台中。它显示 [Vue warn]: Missing required prop: "level"。我不知道为什么。我是Vue
和Nuxt
的新手。
我的 Heading.vue 文件
<template>
<component :is="type" :level="level" class="heading">
<slot />
</component>
</template>
<script>
export default
props:
level:
type: Number,
required: true
,
computed:
type()
if (this.level === 1)
return "h1";
else if (this.level === 2)
return "h2";
else if (this.level === 3)
return "h3";
else if (this.level === 4)
return "h4";
else if (this.level === 5)
return "h5";
else
return "h6";
;
</script>
我正在使用此组件的我的 Page.vue 文件
<script>
import Btn from '~/components/Button/Button.vue'
import Heading from '~/components/Heading.vue'
export default
components:
Btn,
Heading
,
data: () => (
columns: [
image: "banner-1.jpg",
columnHeading: 'Column 1',
columnDesc: 'Lorem ipsum '
,
image: "banner-2.jpg",
columnHeading: 'Column 2',
columnDesc: 'Lorem ipsum '
,
image: "banner-3.jpg",
columnHeading: 'Column 3',
columnDesc: 'Lorem ipsum dolor'
]
)
</script>
<template>
<b-container>
<Heading :level="1">test</Heading>
<b-row class="py-5">
<b-col cols="12" md="4" v-for="(items, index) in columns" :key="index">
<img :src="`images/$items.image`" />
<h5 class="my-3"> items.columnHeading </h5>
<p> items.columnDesc </p>
</b-col>
</b-row>
<Btn to="/about">I'm a Button</Btn>
</b-container>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
我的 Hero.vue 文件
<template>
<div class="position-relative">
<parallax :speed-factor="0.3">
<img src="~/assets/images/man.jpg" />
</parallax>
<div class="hero-text text-center">
<Heading :level="3">Hey, I'm Zuber</Heading>
<Heading :level="2">Web Dev</Heading>
<Heading>I am a senior Web Developer of Classy Theme.
I love to code, travel, music & foods.</Heading>
</div>
</div>
</template>
<script>
import Parallax from 'vue-parallaxy'
import Heading from '~/components/Heading.vue'
export default
components:
Parallax,
Heading
</script>
【问题讨论】:
删除页面模板中的冒号:<Heading level="1">test</Heading>
@Aer0 不,它对我不起作用 :( 它仍然显示错误 [Vue warn]: Missing required prop: "level" found in <Heading :level=1>test</Heading>
,因为你需要一个整数。
看来<component :is="type" :level="level" class="heading">
中的:level="level"
不需要
@bcjohn 抱歉,但我没听懂你想说的话。那我在哪里需要那个?如果没有它,那将如何运作?
【参考方案1】:
问题出在Hero.vue
这一点上:
<Heading>I am a senior Web Developer of Classy Theme.
I love to code, travel, music & foods.</Heading>
你没有通过level
。
不相关,但在Heading.vue
中,您应该可以更改:
<component :is="type" :level="level" class="heading">
到:
<component :is="type" class="heading">
那里不需要level
,除非您想将level
属性添加到您的<h1>
。如果您检查结果元素,您应该能够在开发人员工具中看到效果。在 DOM 中会有一个您可能不需要的 level="1"
。
【讨论】:
以上是关于[Vue 警告]:缺少必需的道具的主要内容,如果未能解决你的问题,请参考以下文章
缺少必需的道具:<AddProduct> 处的“id” - Laravel / Vue
启动路由器时出现意外错误:错误:缺少必需的参数“catchAll”
Vue.js 3,Quasar 2 - 组件缺少模板或渲染功能