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
