bug & debug

仅作参考，个人记录，原因不一定对。

1.

vue.js:634 [Vue warn]: Unknown custom element: 
<my-cmp> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

(found in <Root>)

错误代码：

    const vm = new Vue({
            el: '#app',
            data: {
                name: 'alice'
            },
            methods: {
            },
        });
// 注意：这里的组件注册放到了根实例化之后
        Vue.component('my-cmp', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-a', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-b', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-c', {
            mounted() {
                console.log(this.$root.name);
            },
            template: `<div><slot></slot></div>`
        });

    <div id="app">
    
        <my-cmp>
            <cmp-a>
                <cmp-b>
                    <cmp-c></cmp-c>
                </cmp-b>
            </cmp-a>
        </my-cmp>

     </div>

正确代码：

// 注意：这里的组件注册放到了根实例化之前
        Vue.component('my-cmp', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-a', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-b', {
            template: `<div><slot></slot></div>`
        });
        Vue.component('cmp-c', {
            mounted() {
                console.log(this.$root.name);
            },
            template: `<div><slot></slot></div>`
        });
    const vm = new Vue({
            el: '#app',
            data: {
                name: 'alice'
            },
            methods: {
            },
        });

原因： js中先执行了根元素的实例化，然后就开始编译内部的子组件，这时组件还没有注册，于是就报错了。