Vue警告:未知的自定义元素：<education-item> -您正确注册了组件吗？

Question

我正在尝试修复组件中的以下错误，但仍然失败。错误如下：

Vue警告:未知的自定义元素"education-item"：-您正确注册了组件吗？对于递归组件，请确保提供"name“选项。

在我的密码组件中，下面的脚本中有以下内容：

<template>
<b-list-group class="education-list">
        <b-list-group-item
          class="align-items-start"
          v-for="(education, i) in educations"
          is="education-item"
          :key="i"
          :institute="education.institute"
          :major="education.major"
          :from="education.from"
          :to="education.to"
          @click:edit="education.splice(_id, 1)"
        >
          <div class="row" id="edu-item">
            <div class="eduimg col-md-2 pl-2 pt-2">
              <span class="dot"></span>
              <img class="dot-line" src="../../assets/line.png" />
            </div>
            <div class="col-md-10 pl-0 pr-0">
              <div class="eduinfo" id="eduinfo">
                <h6 class="institute font-weight-bold mt-2 mb-0">{{ education.major }}</h6>
                <p class="mb-0">{{ education.institute }}</p>
                <p class="mb-3">{{ education.from + " - " + education.to }}</p>
              </div>
            </div>
          </div>
        </b-list-group-item>

</template>

<script>
import AddEducationForm from "@/components/form/AddEducationForm";
import MainButton from "@/components/common/ui/main-button";

export default {
  name: "my-education",
  components: {
    AddEducationForm,
    MainButton,
  },
  props: {
    education: Object

  },
  data() {
    return {
      modal: false,
      isLoading: false,
      isEditing: false
    };
  },
  methods: {},
  computed: {
    isOwnProfile() {
      return this.profile.user._id === this.$store.getters.loggedInUser._id;
    },

    educations() {
      return this.$store.getters.profile.education;
    }
  }
};
</script>

问题是，当页面打开时，vue组件没有加载，并且在刷新时错误消失。

有人能帮我了解一下我的安排吗？如果有人能在这个问题上指导我，我将不胜感激。

Answer 1

在<script>标记中添加一个导入语句，如下所示：

import EducationItem from 'wherever/your/component/is';

然后将其添加到组件定义中，如下所示：

 components: {
    AddEducationForm,
    MainButton,
    EducationItem
  },