Vue組件層級關(guān)系詳細分析
前言
在這之前，我們已經(jīng)了解到了vue的組件有哪一些以及這些組件有什么作用，關(guān)于組件的博客，大家可以看本博主的往期文章：傳送門
可以關(guān)注更多的博文進行學(xué)習(xí)了解。好的，我們進入今天的主題，我們知道組件可以進行調(diào)用，網(wǎng)頁也可以通過分割的方式在頁面中進行嵌套，并且可以在組件層級形成父級和子級、兄弟級別的關(guān)系，使得網(wǎng)頁開發(fā)更加的富有層次感。
一、全局組件的層級關(guān)系
全局組件之間的層級關(guān)系是在vue進行代碼程序執(zhí)行調(diào)用的時候才確定的。我們可以通過代碼程序進行了解一下：
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>層級關(guān)系</title>
</head>
<body>
<div id="app">
<top></top>
<middle></middle>
<bottom></bottom>
</div>
<template id="N1">
<!-- 我們定義第一個組件 -->
<div>
<h2>第一個 ：NO.1</h2>
<bottom></bottom>
</div>
</template>
<!-- 我們定義第二個組件 -->
<template id="N2">
<div>
<h2>第二個 ：NO.2</h2>
<bottom></bottom>
</div>
</template>
<!-- 我們定義三個組件 -->
<template id="N3">
<div>
<h3>第三個 ：NO.3</h3>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('top',{
template:'#N1'
});
Vue.component('middle',{
template:'#N2'
});
Vue.component('bottom',{
template:'#N3'
});
var vm = new Vue({
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這個配置選項啊配置嵌套下一級別的組件的。我們可以通過一段實例代碼來進行了解：
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>層級關(guān)系</title>
</head>
<body>
<div id="app">
<top></top>
</div>
<template id="N1">
<!-- 我們定義第一個組件 -->
<div>
<h2>這里是父組件</h2>
<top-child></top-child>
<middle-child></middle-child>
</div>
</template>
<!-- 我們定義第二個組件 -->
<template id="N2">
<div>
<h2>這里是第一個子組件</h2>
</div>
</template>
<!-- 我們定義三個組件 -->
<template id="N3">
<div>
<h3>這里是第二個子組件</h3>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
components:{
"top":{
template:"#N1",
components:{
"top-child":{
template:"#N2",
},
"middle-child":{
template:"#N3",
}
}
}
}
})
</script>
</body>
</html>運行結(jié)果：
我們可以看到在top組件里面的component配置的選項中的配置了兩個子組件top-child、middle-child,這兩個子組件之間是平級的，所以兩個組件之間是平級的關(guān)系，他們兩個組件的父組件都是top。
我們打開視圖可以看到父組件和子組件之間是不能同時調(diào)用的，陣風(fēng)在父組件中調(diào)用子組件。
到此這篇關(guān)于Vue組件層級關(guān)系詳細分析的文章就介紹到這了,更多相關(guān)Vue組件層級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue使用watch監(jiān)聽props的一些小建議,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要為大家詳細介紹了vue數(shù)據(jù)雙向綁定的注意點，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這是一個實現(xiàn)平滑滾動的函數(shù),可以讓頁面在滾動到指定位置時產(chǎn)生緩動效果,本文給大家介紹了如何在在Vue頁面中實現(xiàn)平滑滾動功能,<BR>,文中詳細的代碼講解供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue表單綁定的實例代碼（單選按鈕,選擇框（單選時,多選時,用 v-for 渲染的動態(tài)選項）
詳解webpack + vue + node 打造單頁面(入門篇)