Question

我正在使用Nuxt并尝试创建Heading组件。尝试使用此组件时，它会正确呈现h1标签，但我面临的问题在控制台中。它显示 [Vue警告]：缺少必需的道具：“ 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}`" 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>

我的Hero.vue文件

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

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

1 个答案: