app 作为顶级组件

  <div class="root"></div>
  <script>
    // 组件student 简写模式
    const student = {
      template:`<h1>高高</h1>`
    }
    // 组件shool，完整写法，嵌套了student这个组件
    const shool = Vue.extend({
      template:`<div><h1>理工</h1>
        <student></student>
      </div>`,// 在模板中写上student组件，组件可以嵌套另外一个组件
      components:{
        student
      }
    })
    //app这个组件作为顶级组件，把所有的组件都放到这里，然后再百这个组件注册到root这个容器中
    const app = Vue.extend({
      template:`<div>
        <shool></shool>
      </div>`,// 在模板中写上student组件，组件可以嵌套另外一个组件
      components:{
        shool
      }
    })
    //哪个组件容器服务
    new Vue({
      el:'.root',
      template:'<app></app>',
      components:{app}
      
    })
  </script>

组件嵌套.PNG

• APP嵌套了shool，shool嵌套了student