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

35 篇文章 4 订阅
29 篇文章 1 订阅

目录

前言

一、全局组件的层级关系

二、局部组件的层级关系


前言

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

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

一、全局组件的层级关系

全局组件之间的层级关系是在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。

    我们打开视图可以看到父组件和子组件之间是不能同时调用的,阵风在父组件中调用子组件。

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
以下是一个基于Vue2的多选层级组件的示例代码,你可以根据自己的需求进行修改: ```html <template> <div class="tree"> <div class="tree-item" v-for="(item, index) in treeData" :key="index"> <input type="checkbox" :id="'tree'+index" :checked="item.checked" @change="checkNode(item, $event)"> <label :for="'tree'+index">{{ item.label }}</label> <div class="tree-children" v-if="item.children && item.children.length > 0"> <tree :tree-data="item.children" :last-rank="lastRank(item)"></tree> </div> </div> </div> </template> <script> export default { name: 'tree', props: { treeData: { type: Array, default: () => [] }, lastRank: { type: Boolean, default: false } }, methods: { checkNode(node, event) { node.checked = event.target.checked if (node.children && node.children.length > 0) { node.children.forEach(child => { child.checked = event.target.checked }) } } } } </script> <style scoped> .tree { margin-left: 20px; } .tree-item { display: flex; align-items: center; } .tree-item input[type="checkbox"] { margin-right: 10px; } .tree-children { margin-left: 20px; } </style> ``` 在上述代码中,我们定义了一个名为`tree`的组件,该组件接收两个props:`treeData`和`lastRank`。其中,`treeData`是一个数组,用于表示树的数据结构;`lastRank`是一个布尔值,用于判断当前节点是否是最后一级节点。 在组件的模板中,我们使用了递归的方式来渲染整棵树。对于每个节点,我们都渲染了一个复选框和一个标签,并且根据是否有子节点来决定是否渲染子树。 在组件的方法中,我们定义了一个`checkNode`方法,用于处理节点的选中状态。当一个节点被选中时,我们需要将其所有子节点也选中;当一个节点被取消选中时,我们需要将其所有子节点也取消选中。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丘比特惩罚陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值