Vue组件错误：＜xxx＞ - did you register the component correctly? For recursive components, make sure...

1.出现的错误

今天在试验vue中父子组件的通信时出现了下面这个报错：

大概意思就是组件是否正确注册

但是楼主是注册了组件的，这就让人很迷惑：

    const vm = new Vue({
        el:'#root',
        components:{
            app,
            child1,
            child2
        }
    })

随后楼主又去查看源代码，发现了一个细节：

    // 父组件
    const app ={
        name:"app",
        template:`
        <div>
            <child1 :messageToChild="message"></child1>
            <child2 @childFn="parentFn"></child2>
        </div>
        `,
        data() {
            return {
                message:"Message from app",
            }
        },
        methods: {
            parentFn(message){
                this.getMessage=message;
            }
        },
    }

没错，我的子组件是直接嵌入到父组件的template配置项中的，而局部注册就会导致配置项中的子组件是无法识别的，所以控制台会报组件未定义的错误

2.解决方案

所以现在要解决的问题就是如何让父组件的template配置项能够识别到子组件

楼主首先考虑到的是JS的执行机制，即JS在执行是从上到下逐行执行的，所以楼主简单地将父组件放到了所有子组件的下方，然而并没有什么用(doge)

随后考虑到“局部注册”这个概念，是不是因为局部注册导致的全文无法识别到呢？于是楼主改用了全局注册组件:

    // 全局注册
    Vue.component("app",app);
    Vue.component("child1",child1);
    Vue.component("child2",child2);

果然成功运行了而且控制台也没有报错：

 3.总结

在组件递归中（即直接在template里面嵌套子组件），不能使用局部注册组件，这样会导致父组件在template配置项中无法识别该子组件，改用全局方法Vue.component("xxx",xxx)来注册组件