javascript Vue警告:无法解析组件

x33g5p2x  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(142)

我希望你们都好。我目前在使用父组件内部的组件时遇到一些问题。我尝试了几种方法,但都没有成功。组件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>
vyswwuz2

vyswwuz21#

ImageArticle.vue中定义了

component : {
   ModalBoxActionArticle
},

这必须是这样的(字母s必须在单词component的结尾):

components : {
   ModalBoxActionArticle
},
dsf9zpds

dsf9zpds2#

在我的例子中,出现这个错误是因为我的组件导入时出现了错字
Vue”实际上是在组件名称之后:

import PropsPassingVue from './components/PropsPassing.vue';

它应该是:

import PropsPassing from './components/PropsPassing.vue';

因此,请确保您的组件拼写正确!

相关问题