错误信息：Unknown custom element；did you register the component correctly （Vue组件找不到）

最新推荐文章于 2024-09-18 14:20:40 发布

进击的小王666

最新推荐文章于 2024-09-18 14:20:40 发布

阅读量2.8k

点赞数

分类专栏：项目技巧文章标签： vue.js

本文链接：https://blog.csdn.net/m0_56033865/article/details/120532419

版权

项目技巧专栏收录该内容

22 篇文章 0 订阅

订阅专栏

博客讨论了Vue应用中因组件注册和渲染顺序导致的错误。问题在于尝试在未定义组件的情况下实例化Vue对象，这将导致找不到组件的注册信息。解决方案是确保先注册组件，然后实例化Vue。正确做法是先定义并注册`weixinuser`和`weixinauthor`组件，最后创建Vue实例。

摘要由CSDN通过智能技术生成

找不到组件
其实这个错误与Vue关系不大，是由渲染元素的机制导致的，由于html在渲染时按照代码顺序从上到下进行渲染。

<script>
        new Vue({
            el:'.box',
            data:{

            }
        })//此时会引起报错
        Vue.component("weixinuser",{
            template:`
            <div>{{message}}</div>
            `,
            data(){
                return{
                    message:""
                }
            },
            beforeMount(){
                bus.$on("weixinmessage",data=>
                    this.message=data
                )
            }
        })
        var bus=new Vue();
        Vue.component("weixinauthor",{
            template:`
            <div>
                <input v-model="content"/>
                <button @click="submit()">发布</button>
                </div>
            `,
            data(){
                return {
                    content:""
                }
            },
            methods:{
                submit(){
                    bus.$emit("weixinmessage",this.content)
                }
            }
        })

        
    </script>

渲染组件标签会有一个从内到外的过程，在实例化外部的Vue对象时，如果还没有定义组件（类比变量使用前需要先定义），就有可能导致找不到这个组件的注册信息。
正确的定义方法：

<script>  
        Vue.component("weixinuser",{
            template:`
            <div>{{message}}</div>
            `,
            data(){
                return{
                    message:""
                }
            },
            beforeMount(){
                bus.$on("weixinmessage",data=>
                    this.message=data
                )
            }
        })
        var bus=new Vue();
        Vue.component("weixinauthor",{
            template:`
            <div>
                <input v-model="content"/>
                <button @click="submit()">发布</button>
                </div>
            `,
            data(){
                return {
                    content:""
                }
            },
            methods:{
                submit(){
                    bus.$emit("weixinmessage",this.content)
                }
            }
        })
        new Vue({
            el:'.box',
            data:{

            }
        })
    </script>