组件之间的关系
组件之间存在的关系就和人们现实生活中人与人的关系一样,比如:父子关系.兄弟关系;其实组件之间的关系就是表现在 组件的嵌套;
接下来先聊聊组件的嵌套:
举个例子: 顺治=> 康熙 => 雍正 <-> 胤礽 => 乾隆
嵌套关系
无论怎么嵌套.都需要创建组件的3个步骤:
一:创建模板
二:定义组件
三:注册组件
代码实现的嵌套逻辑:
先创建一个顶层组件模板
<div id="app">
嵌套 顺治帝组件
<Szd></Szd>
</div>
创建一个 顺治帝 模板
<template id="Szds">
<div>
<h1>{{title}}</h1>
嵌套 康熙帝 组件
<Kxd></Kxd>
</div>
</template>
创建一个 康熙帝 模板
<template id="kxds">
<div>
<h1> {{title}} </h1>
</div>
</template>
<script>
定义一个 康熙帝 模板
const kxd ={
template:"#kxds",
data(){
return { title:"康熙" }
}
}
定义 顺治帝 组件
const szd ={
template:"#Szds"
data(){
return { title:"顺治" }
},
components:{
"Kxd":kxd
}
}
实例一个顶层组件
new Vue({
el:"#app",
components:{
注册 顺治帝 组件
"Szd":szd
}
})
</script>
