一、组件嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <app></app>-->
</div>
</body>
<script>
//定义student组件，嵌套在school里面，需要写在school前面
const student = Vue.extend({
name:'student ',
template:`
<div>
<h2>学生名称:{
{name}}</h2>
<h2>年龄:{
{age}}</h2>
</div>
`,
data() {
return {
name:'天堂',
age:19
}
},
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称:{
{name}}</h2>
<h2>学校地址:{
{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name:'天堂',
address:'长沙'
}
},
//注册组件（局部）
components:{
student //注册在shool里面的组件需要写在school前面
}
})
//定义一个hello组件
const hello = Vue.extend({
template:`
<h2>{
{msg}}</h2>
`,
data() {
return {
msg:'欢迎来到长沙'
}
},
})
//定义一个app组件 管理所有平级的组件，嵌套组件不算
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:` <app></app>`,
el:'#root',
//注册组件（局部）
components:{
app
}
})
</script>
</html>二、VueComponent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<hello></hello>
<school></school>
</div>
<script>
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称:{
{name}}</h2>
<h2>学校地址:{
{address}}</h2>
<button @click="sahnName">点击提示学校名称</button>
</div>
`,
data() {
return {
name:'天堂',
address:'长沙'
}
},
methods: {
sahnName(){
console.log('sahnName',this);
}
},
})
//定义test组件
const test = Vue.extend({
template:`<h2>{
{name}}</h2>`,
data() {
return {
name:'天下'
}
},
})
//定义hello组件
const hello = Vue.extend({
template:`
<div>
<h2>{
{msg}}</h2>
<test></test>
</div>`,
data() {
return {
msg:'你好阿！！！'
}
},
components:{
test
}
})
// console.log('@',school === hello); 验证方法
//console.log('@',school);
// console.log('#',hello);
//创建vm
new Vue({
el:'#root',
//注册组件（局部）
components:{
school,
hello
}
})
</script>
</body>
</html>