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

Posted 2023-02-23

【中文标题】[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 &amp; 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 at components/Heading.vue

冒号是用来避免在你想将变量传递给组件时使用` " `。所以试试<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 &amp; foods.</Heading>

你没有通过level。

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

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

到：

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

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