组件的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.组件的嵌套（school中包含student标签）
2.在app组件中使用其他组件
-->
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- 使用组件 -->
<app></app>
</div>
<script>
Vue.config.productionTip=false
//定义student组件
const student =Vue.extend({
name:'student',
template:
`
<div>
<h3>学生名称：{{name}}</h3>
</div>
`,
data(){
return{
name:'wei'
}
}
})
//定义school组件
const school =Vue.extend({
template:
`
<div>
<h3>学校名称：{{name}}</h3>
<student></student>
</div>
`,
data(){
return{
name:'轩辕学校'
}
},
//把嵌套的子级放到school组件下（注册）
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:
`
<div>
<h3>班干部名称：{{name}}</h3>
</div>
`,
data(){
return{
name:'shi'
}
}
})
//定义app组件
const app = Vue.extend({
template:
`
<div>
<school></school>
<hello></hello>
</div>
`,
components:{
school,
hello
}
})
new Vue({
el:'#root',
//注册组件
components:{
app
}
})
</script>
</body>
</html>
