- 首页
- 前端开发
- Vue 警告:未知的自定义元素:<myCompont>- 您是否正确注册了组件?
Vue 警告:未知的自定义元素:<myCompont>- 您是否正确注册了组件?
[英] Vue warn: Unknown custom element: <myCompont> - did you register the component correctly?
本文介绍了Vue 警告:未知的自定义元素:<myCompont>- 您是否正确注册了组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是大一新生，当我使用自定义组件时，它给了我这个错误:
<块引用>
Vue 警告:未知的自定义元素:- 您是否正确注册了组件?
NoticeModal.vue 组件中使用的ModalBase 组件和productInfo.vue 中使用的NoticeModal 组件.
我确定我在 productInfo.vue 中正确导入了 NoticeModal 并在 NoticeModal.vue 中导入了 ModalBase.vue，并全部注册.
但我得到了唯一的警告:Unknown custom element: <modal-base>
这是ModalBase.vue:
<div><div class="modal-header"><插槽名称=标题"><p class="title">这是基础</p></slot>
</模板><脚本>导出默认{名称:ModalBase"，数据() {返回{显示:''}}}
这是NoticeModal.vue:
<div class="noticeModal"><模态基础><div slot="header">hello</div></modal-base>
</模板><脚本>从 '@/components/index' 导入 {ModalBase}；导出默认{名称:NoticeModal"，道具:['modalOptions']，成分: {模态库},数据() {返回{显示:''}}}
这里是productInfo.vue:
<div><notice-modal></notice-modal>
</模板><脚本>从'@/components/index'导入{NoticeModal}；导出默认{名称:产品信息"，成分: {'NoticeModal':NoticeModal},数据() { }}
顺便说一下这个路径'@/components/index'是对的，NoticeModal和ModalBase都已经正确导入注册导出在这个文件中.
在 @/components/index 中:
import NoticeModal from '@/components/componentsFile/NoticeModal.vue'从'@/components/componentsFile/ModalBase.vue' 导入 ModalBase出口 {注意模态，模态库}
解决方案
components: {'NoticeModal':NoticeModal},
这些行表示您已经注册了一个名为NoticeModel"的组件.所以在你的模板代码中，你应该使用这个带有NoticeModel"作为html标签的组件.
<div><NoticeModel></NoticeModel>
</模板>
您也可以使用以下代码注册一个 HTML 样式标签并将其与 notice-modal
一起使用
组件:{'通知模式':通知模式}
I'm a freshman, when i use use custom components, it gives me this error:
Vue warn: Unknown custom element: - did you register the component correctly?
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.
But I get the only warn: Unknown custom element: <modal-base>
Here is 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>
Here is 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>
And here is 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>
By the way this path '@/components/index' is right, both NoticeModaland ModalBase had imported and registered and exported correctly in this file.
And in @/components/index:
import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'
export {
NoticeModal,
ModalBase
}
解决方案
components: {
'NoticeModal': NoticeModal
},
These lines means you've registered a component named 'NoticeModel'. So in your template code, you should use this component with "NoticeModel" as html tag.
<template>
<div>
<NoticeModel></NoticeModel>
</div>
</template>
Also you could use following code to register a HTML style tag and use it with notice-modal
components: {
'notice-modal': NoticeModal
}
这篇关于Vue 警告:未知的自定义元素:<myCompont>- 您是否正确注册了组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
