文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue组件层级关系详细分析

2024-04-02 19:55

关注

前言

在这之前,我们已经了解到了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组件层级内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯