Vue警告:解析组件失败

2022-01-30 12:52:48 标签 javascriptvue.jsvue-component

我希望你们都好。我目前有一些问题,使用一个组件,这是一个父组件。我试了一些办法,但都没有成功。

组件ModalBoxActionArticle不想显示,我有以下错误消息:

[Vue warn]:无法解析组件:ModalBoxActionArticle在

在& lt;

onVnodeUnmounted = fn ref = Ref<未定义的祝辞比;在

你能帮我一下吗?提前感谢您的时间和帮助。

在这些组件的根目录下找到vue视图:

<template>
  <div class="home">
      <ImageArticle class="home__component"/>
  </div>
</template>
<script>
import ImageArticle from "../components/imageArticle"
export default {
  name: 'Home',
  components: {
    ImageArticle,
  }
}
</script>

下面是imageararticle组件(我删除了样式)

<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>

最后但并非最不重要的是找到组件ModalBoxActionArticle下面,它是在ImageArticle组件中

<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 you have您已经定义

component : {
   ModalBoxActionArticle
},

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

components : {
   ModalBoxActionArticle
},
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码