javascript - Vue警告:未知的自定义元素:- 您是否正确注册了组件?
问题描述
我是一名新生,当我使用自定义组件时,它给了我这个错误:
Vue 警告:未知的自定义元素:-您是否正确注册了组件?
组件中使用的ModalBase
组件NoticeModal.vue
和 组件NoticeModal
中使用的组件productInfo.vue
。
我确定我已经正确地 import NoticeModal
inproductInfo.vue
和 import ModalBase.vue
in NoticeModal.vue
,并且全部注册了。
但我得到唯一的警告: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
}
解决方案
components: {
'NoticeModal': NoticeModal
},
这些行意味着您已经注册了一个名为“NoticeModel”的组件。因此,在您的模板代码中,您应该将此组件与“NoticeModel”一起用作 html 标记。
<template>
<div>
<NoticeModel></NoticeModel>
</div>
</template>
您也可以使用以下代码注册 HTML 样式标签并将其与通知模式一起使用
components: {
'notice-modal': NoticeModal
}
推荐阅读
- mysql - 没有以变量作为 json 键获取 Mysql json 值
- java - 无法运行 ant clean jar ide-dependencies 命令
- angular6 - Angular 6 和 bpmn-properties-panel
- twilio - 如何在 Twilio 中通过编程方式设置长代码?
- javascript - 如何使用formData使用ajax从2个不同的文件输入中上传文件?
- java - JSPG0036E: 找不到资源 jsp
- php - 如何在给定数组所有序列号 1 到 n 的情况下创建输出 true 或 false 的 php 函数
- mysql - 在 Mysql 过程中似乎找不到错误 Error 1064 (42000)
- javascript - setTimeout 函数中的第三个参数是什么?
- android - 可以在 Application 类中调用 Web 服务吗?