vue.js组件问题

Question

<div id="app2">
        {{message2}}
        <parent></parent>
    </div>
    <script>
        var child2 = Vue.extend({
            template:'<p>this is child template</p>'
        })
        Vue.component('parent' , {
            template:'<p>this is parent template</p><child1></child1>',
            component:{
                "child1":child2
            }
        })  
        var vm2 = new Vue({
            el:"#app2",
            data: {
                message2 : "hello app2!"
            }
        })
        </script>
        

以上代码出现报错

求大神告知这为什么，应该如何修改，使得子组件里可以嵌套孙组件。

Answer 1

1. 组件的template只能有一个祖先级节点

2. 局部注册组件使用components而不是component

Answer 2

Vue.component('parent' , {
            template:'<p>this is parent template</p><child1></child1>',
            component:{
                "child1":child2
            }
        })  
        
        // template:'<p>this is parent template</p><child1></child1>',在外面套一层div
         template:'<div><p>this is parent template</p><child1></child1></div>'。因为vue需要root Element.错误提示。