Vue:组件的嵌套(app组件)
什么是组件的嵌套?
答:当在一个组件里面又使用可一个组件就称为组件的嵌套
组件嵌套的案例
学校组件嵌套学生组件
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
<h1>组件的使用</h1>
<school></school><hr/>
<school></school><hr/>
<school></school><hr/>
<school></school><hr/>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
//建立一个学生组件
const student=Vue.extend({
template:`
<h2>学生名字:{{student}}</h2>
`,
data(){
return {
student:"小红"
}
}
})
//建立一个学校组件
const school=Vue.extend({
//页面模板
template:`
<div>
<h1>{{schoolname}}</h1>
<h2>{{adress}}</h2>
<Student></Student>
</div>
`,
//每个组件能带自己的属性:记住一定写成函数防止引用
data(){
return {
schoolname:"六中",
adress:"福建"
}
},
//注册学生组件
components:{
Student:student
}
})
//实例里面只需要注册·一个school即可(里面包含了student)
let v=new Vue({
el:"#firstVue",
components:{
school
}
})
console.log(v)
</script >
</html>
实际开发中的app组件干什么用的?
app用来管理所有组件的组件
就是一人之下万人之上的组件
app组件认识
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
//建立一个学生组件
const student=Vue.extend({
template:`
<h2>学生名字:{{student}}</h2>
`,
data(){
return {
student:"小红"
}
}
})
//建立一个学校组件
const school=Vue.extend({
//页面模板
template:`
<div>
<h1>{{schoolname}}</h1>
<h2>{{adress}}</h2>
<Student></Student>
</div>
`,
//每个组件能带自己的属性:记住一定写成函数防止引用
data(){
return {
schoolname:"六中",
adress:"福建"
}
},
//注册学生组件
components:{
Student:student
}
})
//建立一个app组件
const app=Vue.extend({
template:`
<div>
<school></school><hr>
<school></school><hr>
<school></school><hr>
</div>
`,
components:{
school
}
})
//实例里面只需要注册·一个school即可(里面包含了student)
let v=new Vue({
//这样前端就非常干净
template:`
<app></app>
`,
el:"#firstVue",
components:{
app
}
})
console.log(v)
</script >
</html>
了解vc和vm
当一个vm实例调用了component时候请问component的this是什么?
答:是一个VueComponent对象
这个对象于vm类似可以有data,computede等等统称vc对象