【Vue五分钟】五分钟让你了解vue组件的层级关系

【Vue五分钟】五分钟让你了解vue组件的层级关系
目录

前言

一、全局组件的层级关系

二、局部组件的层级关系

前言

在这之前，我们已经了解到了vue的组件有哪一些以及这些组件有什么作用，关于组件的博客，大家可以看本博主的往期博客：【vue五分钟】五分钟让你了解vue组件_丘比特惩罚陆的博客-CSDN博客

可以关注更多的博文进行学习了解。好的，我们进入今天的主题，我们知道组件可以进行调用，网页也可以通过分割的方式在页面中进行嵌套，并且可以在组件层级形成父级和子级、兄弟级别的关系，使得网页开发更加的富有层次感。

一、全局组件的层级关系

全局组件之间的层级关系是在vue进行代码程序执行调用的时候才确定的。我们可以通过代码程序进行了解一下：

实例代码：
```
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.1h2>
        <bottom>bottom>
    div>
template>
 
   
<template id="N2">
    <div>
        <h2>第二个 ：NO.2h2>
        <bottom>bottom>
    div>
template>
 
   
   <template id="N3">
    <div>
        <h3>第三个 ：NO.3h3>
    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这个配置选项啊配置嵌套下一级别的组件的。我们可以通过一段实例代码来进行了解：

实例代码：
```
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。

我们打开视图可以看到父组件和子组件之间是不能同时调用的，阵风在父组件中调用子组件。
相关阅读:
公众号一次性订阅消息
 从源码看Spring如何解决循环依赖的脉络？鸡生蛋与蛋生鸡的问题！
【云原生Kubernetes系列第二篇】kubeadm v1.20 部署K8S 集群架构【admin部署】
java和数据库之间的关系，看这一篇就足够~~~
UE5笔记【二】添加实体和材质。后处理体积影响全局和局部。
2022-10-17 我帮你踩了libcurl接收json数据的一些坑
 SSL证书优惠购买，HTTPS证书双11价格
 MySQL数据库事务隔离级别与性能监控
 C++项目实战-GCC编译
 ShardingSphere-JDBC使用
原文地址：https://blog.csdn.net/Lushengshi/article/details/126482885

前言

一、全局组件的层级关系

二、局部组件的层级关系