javascript Vue 警告：未知的自定义元素：<myCompont> - 您是否正确注册了组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50408041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue warn: Unknown custom element: <myCompont> - did you register the component correctly?
提问by JessieJin1988
i'm a freshman, when i use use custom components, it gives me this error:
我是大一新生，当我使用自定义组件时，它给了我这个错误：
Vue warn: Unknown custom element: <modal-base> - did you register the component correctly?
the 'ModalBase' compontent used in the components NoticeModal.vue.
组件 NoticeModal.vue 中使用的“ModalBase”组件。
and 'NoticeModal' compontent used in the productInfo.vue
和 productInfo.vue 中使用的“NoticeModal”组件
I'm sure I had correctly import NoticeModal in productInfo.vue and aslo import ModalBase.vue in NoticeModal.vue , and all registerd.
我确定我在 productInfo.vue 中正确导入了 NoticeModal 并在 NoticeModal.vue 中导入了 ModalBase.vue ，并且都已注册。
but I get the only warn: Unknown custom element: .
但我得到唯一的警告：未知的自定义元素：。
ModalBase.vue
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
注意Modal.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
产品信息.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 ,'@/components/index' this path is right, both 'NoticeModal' and 'ModalBase' had imported and registered and exported correctly in this file.
========== 顺便说一句，'@/components/index'这个路径是对的，'NoticeModal'和'ModalBase'都在这个文件中正确导入和注册并导出。
@/components/index
@/组件/索引
import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'
export {
NoticeModal,
ModalBase
}
采纳答案by Kevin Law
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.
这些行表示您已经注册了一个名为“NoticeModel”的组件。因此，在您的模板代码中，您应该将此组件与“NoticeModel”一起用作 html 标记。
<template>
<div>
<NoticeModel></NoticeModel>
</div>
</template>
Also you could use following code to register a HTML style tag and use it with notice-modal
您也可以使用以下代码来注册 HTML 样式标签并将其与notice-modal 一起使用
components: {
'notice-modal': NoticeModal
}
