第Vue組件層級關(guān)系詳細(xì)分析目錄前言一、全局組件的層級關(guān)系二、局部組件的層級關(guān)系

前言

在這之前，我們已經(jīng)了解到了vue的組件有哪一些以及這些組件有什么作用，關(guān)于組件的博客，大家可以看本博主的往期文章：傳送門

可以關(guān)注更多的博文進(jìn)行學(xué)習(xí)了解。好的，我們進(jìn)入今天的主題，我們知道組件可以進(jìn)行調(diào)用，網(wǎng)頁也可以通過分割的方式在頁面中進(jìn)行嵌套，并且可以在組件層級形成父級和子級、兄弟級別的關(guān)系，使得網(wǎng)頁開發(fā)更加的富有層次感。

一、全局組件的層級關(guān)系

全局組件之間的層級關(guān)系是在vue進(jìn)行代碼程序執(zhí)行調(diào)用的時候才確定的。我們可以通過代碼程序進(jìn)行了解一下：

實例代碼：

!DOCTYPEhtml

htmllang="en"

head

title層級關(guān)系/title

/head

body

divid="app"

top/top

middle/middle

bottom/bottom

/div

templateid="N1"

!--我們定義第一個組件--

div

h2第一個：NO.1/h2

bottom/bottom

/div

/template

!--我們定義第二個組件--

templateid="N2"

div

h2第二個：NO.2/h2

bottom/bottom

/div

/template

!--我們定義三個組件--

templateid="N3"

div

h3第三個：NO.3/h3

/div

/template

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

Vponent('top',{

template:'#N1'

Vponent('middle',{

template:'#N2'

Vponent('bottom',{

template:'#N3'

varvm=newVue({

el:"#app",

/script

/body

/html

運行結(jié)果：

我們在上面已經(jīng)定義了三個全局的組件：top、middle、bottom，然后我們通過使用top和middle組件中都調(diào)用了bottom的組件，通過這個我們了解到top和bottom、middle和bottom之間是父子級別的關(guān)系。

然后在實例中，app在次調(diào)用了三個組件，而這三個組件之間都是平級的關(guān)系，所以我們能知道組件之間的層級關(guān)系都是在調(diào)用的時候確定的。

二、局部組件的層級關(guān)系

我們了解了全局組件的關(guān)系，那我們對于局部組件的層級關(guān)系應(yīng)該可以說是大同小異了，局部組件之間的層級關(guān)系，他們在定義的時候，每一個組件都是有component這個配置選項啊配置嵌套下一級別的組件的。我們可以通過一段實例代碼來進(jìn)行了解：

實例代碼：

!DOCTYPEhtml

htmllang="en"

head

title層級關(guān)系/title

/head

body

divid="app"

top/top

/div

templateid="N1"

!--我們定義第一個組件--

div

h2這里是父組件/h2

top-child/top-child

middle-child/middle-child

/div

/template

!--我們定義第二個組件--

templateid="N2"

div

h2這里是第一個子組件/h2

/div

/template

!--我們定義三個組件--

templateid="N3"

div

h3這里是第二個子組件/h3

/div

/template

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varvm=newVue({

el:"#app",

components:{

"top":{

template:"#N1",

components:{

"top-child":{

template:"#N2",

"middle-child":{

template:"#N3",

/script

/body

/html

運行結(jié)果：

我們可以看到在top組件里面的component配置的選項中的配置了兩個子組件