[Vue 警告]:缺少必需的道具

Posted

技术标签:

【中文标题】[Vue 警告]:缺少必需的道具【英文标题】:[Vue warn]: Missing required prop 【发布时间】:2019-11-11 20:10:33 【问题描述】:

我正在使用Nuxt 并尝试创建Heading 组件。当尝试使用这个组件时,它会正确呈现h1 标签,但我面临的问题是在控制台中。它显示 [Vue warn]: Missing required prop: "level"。我不知道为什么。我是VueNuxt 的新手。

我的 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 &amp; foods.</Heading>
  </div>
</div>
</template>

<script>
  import Parallax from 'vue-parallaxy'
  import Heading from '~/components/Heading.vue'
  export default 
    components: 
      Parallax,
      Heading
    
  
</script>

【问题讨论】:

删除页面模板中的冒号:&lt;Heading level="1"&gt;test&lt;/Heading&gt; @Aer0 不,它对我不起作用 :( 它仍然显示错误 [Vue warn]: Missing required prop: "level" found in at components/Heading.vue 冒号是用来避免在你想将变量传递给组件时使用` " `。所以试试&lt;Heading :level=1&gt;test&lt;/Heading&gt;,因为你需要一个整数。 看来&lt;component :is="type" :level="level" class="heading"&gt;中的:level="level"不需要 @bcjohn 抱歉,但我没听懂你想说的话。那我在哪里需要那个?如果没有它,那将如何运作? 【参考方案1】:

问题出在Hero.vue这一点上:

 <Heading>I am a senior Web Developer of Classy Theme. 
I love to code, travel, music &amp; foods.</Heading>

你没有通过level

不相关,但在Heading.vue 中,您应该可以更改:

<component :is="type" :level="level" class="heading">

到:

<component :is="type" class="heading">

那里不需要level,除非您想将level 属性添加到您的&lt;h1&gt;。如果您检查结果元素,您应该能够在开发人员工具中看到效果。在 DOM 中会有一个您可能不需要的 level="1"

【讨论】:

以上是关于[Vue 警告]:缺少必需的道具的主要内容,如果未能解决你的问题,请参考以下文章

缺少必需的道具:<AddProduct> 处的“id” - Laravel / Vue

启动路由器时出现意外错误:错误:缺少必需的参数“catchAll”

Vue.js 3,Quasar 2 - 组件缺少模板或渲染功能

vue组件,prop声明并传递,但是console说prop丢失

谷歌播放警告缺少leanback意图

类型错误:预测()缺少 1 个必需的位置参数:'y_train'