vue中组件的父子关系

1.了解最简单的HTML中的父子关系

<div>
        <li>
            <p></p>
        </li>
    </div>

div和li形成父子关系，div是父，li是子；li和p形成父子关系。同理div和p就是爷孙关系，依次类推
2.组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。简单点说就是自已创造一个HTML标签（自已的理解）

<div id="app">
        <li>
            <child-com></child-com>
            <p></p>
        </li>
    </div>
    <script>
        Vue.component('child-com',{

        })
        var vm = new Vue({
            el:"#app"
        })
    </script>

div和li形成父子关系，li和child-com形成父子关系，li也和形成父子关系，n那么child-com和p就形成了同辈关系，依次类推
3.template它是component里面的一个内容，template它又可以创建一个模板块

<div id="app">
        <li>
            <child-com></child-com>
            <p></p>
        </li>
    </div>
    <script>
        Vue.component('child-com',{
            template:'<h1></h1>'
        })
        var vm = new Vue({
            el:"#app"
        })
    </script>

由于temlate在child-com里面创建的，自然child-com和temlate里面的好形成父子关系，child-com是父，h1是子
4**.在child-com使用了third-com，那么child-com里面的third-com就是h2的父亲**

  <div id="app">
        <li>
            <child-com></child-com>
            <p></p>
        </li>
    </div>
    <script>
         Vue.component('third-com',{
            template:'<h2></h2>'
        })
        Vue.component('child-com',{
            template:`<h1>
                            <third-com></third-com?
                     </h1>`
        })
        var vm = new Vue({
            el:"#app"
        })
    </script>
    ```
***自已的理解，有什么更好的理解互相分享，如果不对，更要指出来***