javascript - [Vue警告] : Missing required prop

Question

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

My Heading.vue file

<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>

My Page.vue file where i am using this component

<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}`" alt=""/>
                <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>

My Hero.vue file

<template>
<div class="position-relative">
  <parallax :speed-factor="0.3">
    <img src="~/assets/images/man.jpg" alt="Zed-FED" />
  </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>

Answer 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> 。如果检查生成的元素，您应该能够在开发人员工具中看到效果。会有一个level="1"在您可能不需要的 DOM 中。