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