Vue 警告：未知自定义元素：<myCompont> - 您是否正确注册了组件？

Question

我是一名新生，当我使用自定义组件时，它给了我这个错误：

Vue 警告：未知自定义元素：- 您是否正确注册了组件？

The ModalBase compontent used in the components NoticeModal.vue and NoticeModal compontent used in the productInfo.vue .

I’m sure I had correctly import NoticeModal in productInfo.vue and also import ModalBase.vue in NoticeModal.vue , and all registerd.

但我得到唯一的警告： Unknown custom element: <modal-base>

这是 ModalBase.vue ：

 <template>
  <div>
    <div class="modal-header">
      <slot name="header">
        <p class="title">This is base</p>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "ModalBase",
  data() {
    return {show: ''}
  }
}
</script>

这是 NoticeModal.vue ：

 <template>
  <div class="noticeModal">
    <modal-base>
      <div slot="header">hello</div>
    </modal-base>
  </div>
</template>
<script>
import {ModalBase} from '@/components/index';

export default {
  name: "NoticeModal",
  props: ['modalOptions'],
  components: {
    ModalBase
  },
  data() {
    return {show: ''}
  }
}
</script>

这是 productInfo.vue ：

 <template>
  <div>
    <notice-modal></notice-modal>
  </div>
</template>
<script>
import {NoticeModal} from '@/components/index';

export default {
  name: "productInfo",
  components: {
    'NoticeModal': NoticeModal
  },
  data() { }
}
</script>

顺便说一下，这条路径 '@/components/index' 是正确的， NoticeModal 和 ModalBase 都已在此文件中正确导入和注册和导出。

在 @/components/index 中：

 import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'

export {
  NoticeModal,
  ModalBase
}

原文由 JessieJin1988 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

components: {
        'NoticeModal': NoticeModal
},

这些行意味着您已经注册了一个名为“NoticeModel”的组件。因此，在您的模板代码中，您应该将此组件与“NoticeModel”一起用作 html 标记。

 <template>
    <div>
        <NoticeModel></NoticeModel>
    </div>
</template>

您也可以使用以下代码注册一个 HTML 样式标签并将其与 notice-modal 一起使用

components: {
    'notice-modal': NoticeModal
}

原文由 Kevin Law 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您应该直接导入您的组件。例如：

代替

import {ModalBase} from '@/components/index';

放

import ModalBase from '@/components/ModalBase.vue';

原文由 AleM 发布，翻译遵循 CC BY-SA 4.0 许可协议