javascript - Vue警告: Unknown custom element: - did you register the component correctly?

Question

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

[Vue warn]: Unknown custom element "education-item": - did you register the component correctly? For recursive components, make sure to provide the "name" option.

在我的密码组件中，按照脚本，我有以下内容:

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