Vue元件層級關係詳細分析

2022-08-29 18:01:34

前言

在這之前，我們已經瞭解到了vue的元件有哪一些以及這些元件有什麼作用，關於元件的部落格，大家可以看本博主的往期文章：傳送門

可以關注更多的博文進行學習瞭解。好的，我們進入今天的主題，我們知道元件可以進行呼叫，網頁也可以通過分割的方式在頁面中進行巢狀，並且可以在元件層級形成父級和子級、兄弟級別的關係，使得網頁開發更加的富有層次感。

一、全域性元件的層級關係

全域性元件之間的層級關係是在vue進行程式碼程式執行呼叫的時候才確定的。我們可以通過程式碼程式進行了解一下：

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>層級關係</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>

執行結果：

我們在上面已經定義了三個全域性的元件：top、middle、bottom，然後我們通過使用top和middle元件中都呼叫了bottom的元件，通過這個我們瞭解到top和bottom、middle和bottom之間是父子級別的關係。

然後在範例中，app在次呼叫了三個元件，而這三個元件之間都是平級的關係，所以我們能知道元件之間的層級關係都是在呼叫的時候確定的。

二、區域性元件的層級關係

我們瞭解了全域性元件的關係，那我們對於區域性元件的層級關係應該可以說是大同小異了，區域性元件之間的層級關係，他們在定義的時候，每一個元件都是有component這個設定選項啊設定巢狀下一級別的元件的。我們可以通過一段範例程式碼來進行了解：

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>層級關係</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>

執行結果：

我們可以看到在top元件裡面的component設定的選項中的設定了兩個子元件top-child、middle-child,這兩個子元件之間是平級的，所以兩個元件之間是平級的關係，他們兩個元件的父元件都是top。

我們開啟檢視可以看到父元件和子元件之間是不能同時呼叫的，陣風在父元件中呼叫子元件。

到此這篇關於Vue元件層級關係詳細分析的文章就介紹到這了,更多相關Vue元件層級內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue元件層級關係詳細分析

目錄

前言

一、全域性元件的層級關係

二、區域性元件的層級關係

熱門文章