組件之間的關系
組件之間存在的關系就和人們現(xiàn)實生活中人與人的關系一樣,比如:父子關系.兄弟關系;其實組件之間的關系就是表現(xiàn)在 組件的嵌套;
接下來先聊聊組件的嵌套:
舉個例子:? ?順治=> 康熙 => 雍正 <-> 胤礽 => 乾隆
嵌套關系
無論怎么嵌套.都需要創(chuàng)建組件的3個步驟:?
? ?一:創(chuàng)建模板
? ?二:定義組件
? ?三:注冊組件
代碼實現(xiàn)的嵌套邏輯:
先創(chuàng)建一個頂層組件模板
<div id="app">
嵌套??順治帝組件
<Szd></Szd>
</div>
創(chuàng)建一個 順治帝 模板
<template id="Szds">
<div>
<h1>{{title}}</h1>
嵌套? 康熙帝 組件?
<Kxd></Kxd>
</div>
</template>
創(chuàng)建一個? 康熙帝? 模板?
<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>
