javascript - Vue警告:无法解析组件
问题描述
我希望你们一切都好。我目前在使用父组件内部的组件时遇到了一些问题。我尝试了几件事,但没有成功......组件ModalBoxActionArticle不想显示,我有以下错误消息:
[Vue 警告]:无法解析组件:ModalBoxActionArticle at <Home onVnodeUnmounted=fn ref=Ref<undefined >> at at
你能帮我解决这个问题吗?提前感谢您的时间和帮助。
在这些组件的根目录下找到vue View:
<template>
<div class="home">
<ImageArticle class="home__component"/>
</div>
</template>
<script>
import ImageArticle from "../components/imageArticle"
export default {
name: 'Home',
components: {
ImageArticle,
}
}
</script>
在ImageArticle组件下方找到(我删除了样式)
<template>
<div>
<article class="postWithImage">
<ModalBoxActionArticle/>
<div class="postWithImage__1div">
<picture class="postWithImage__pictureProfile">
<img class="postWithImage__imgProfile" src="../assets/EugenieProfile.jpeg" alt="photo de profile de la personne qui a publié l'image">
</picture>
.... here I removed some html to make it more readable ....
</article>
</div>
</template>
<script>
import ModalBoxActionArticle from '../components/modalBoxActionArticle'
export default {
name: 'ImageArticle',
component : {
ModalBoxActionArticle
},
setup() {
console.log('%c loading ImageArticle component', 'color:green');
return {};
},
}
</script>
最后但并非最不重要的是,在ImageArticle组件内的组件ModalBoxActionArticle
<template>
<div class="modal">
<button class="modal__btt modal__btt--alert">Signaler</button>
<button class="modal__btt">Partager</button>
<button class="modal__btt">Modifier</button>
<button class="modal__btt modal__btt--alert">Supprimer</button>
</div>
</template>
<script>
export default {
name: "ModalBoxActionArticle",
setup() {
console.log('%cloading ModalBoxActionArticle newest component', 'color:red');
return {};
},
}
</script>
解决方案
在ImageArticle.vue
你已经定义
component : {
ModalBoxActionArticle
},
这必须是这样的(字母s
必须在单词的末尾component
):
components : {
ModalBoxActionArticle
},
推荐阅读
- cassandra - 通过 cassandra 在 Zeppelin 中读取数据
- forms - MarkItUp 表单 POST 数据丢失
- google-bigquery - Talend Google BigQuery 通过 tRestClient 删除表
- c++ - QBS .../install-root/MyProject:加载共享库时出错:foobar.so:无法打开共享对象文件:没有这样的文件或目录
- c# - 不要因为读取大数组而让 GUI 冻结为 parallel.for
- ruby-on-rails - 流式传输 .js.erb 响应
- xamarin - AbsoluteLayout > StackLayout 中的标签文本溢出到网格之外
- php - Laravel 连接两个表以排除记录
- sql - 如何在谷歌云平台上对 bigquery 中的表执行多次更新?
- cordova - EsLint 或 Create React App - 未定义 Cordova