简介
主要讲解组件时如何嵌套的。
组件嵌套类似于一个组件里面注册了另外一个组件,存在父子关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件嵌套</title>
</head>
<body>
<div id="root">
<school></school>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false;
const student = Vue.extend({
template:`
<div>
<div>学生:{{studentName}}</div>
<div>年龄:{{studentAge}}</div>
</div>
`,
data() {
return {
studentName:"张三",
studentAge:18
}
},
});
//这里是第一步,创建组件,使用Vue.extend函数进行创建,传入一个配置对象
// 创建组件有一个注意点是传入的配置对象不能配置el配置项,因为组件时不属于谁的,到时使用时确定在哪使用。
// 创建组件第二个注意点是,data数据必须写成函数的形式,并且函数返回一个对象。
const school = {
//配置组件使用的模板,需要用一个div套在外面,确保只有一个根元素。
//这里就封装了组件的html。
template:`
<div>
<div>学校:{{schoolName}}</div>
<div>地址:{{schoolAddress}}</div>
<hr>
<!-- 嵌套组件的使用只能在父组件的template选项使用 -->
<student></student>
</div>
`,
//配置数据
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
//school组件里面嵌套了studen组件
components:{
student:student
}
};
new Vue({
el:"#root",
components:{
school:school
}
})
</script>
</html>
效果: