我希望你们都好。我目前在使用父组件内部的组件时遇到一些问题。我尝试了几种方法,但都没有成功。组件ModalBoxActionArticle不想显示,我有以下错误信息:
[Vue warn]:无法解析组件:ModalBoxActionArticle at〈Home onVnodeUnmounted=fn ref=Ref< undefined >〉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>
2条答案
按热度按时间vyswwuz21#
在
ImageArticle.vue
中定义了这必须是这样的(字母
s
必须在单词component
的结尾):dsf9zpds2#
在我的例子中,出现这个错误是因为我的组件在导入时出现了错字!
“Vue”实际上是在组件名称之后:
它应该是:
因此,请确保您的组件拼写正确!