Vue组件层级关系详细分析
目录
- 前言
- 一、全局组件的层级关系
- 二、局部组件的层级关系
前言
在这之前，我们已经了解到了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组件层级内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue transition过渡组件详解
目录 一.vue里面的transition组件 二.transition组件应用CSS过渡 (1)单元数/组件过渡 (2)多个元素过渡 (3)多个组件过渡 (4)列表过渡 三.JavaScript钩子 一.vue里面的transition组件 Vue提供了这个transition组件,可以使得在v-if条件渲染.v-show条件显示.动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡. 二.transition组件应用CSS过渡 在应用css过渡的时候,transition组件会在恰当
-
Vue子组件内的props对象参数配置方法
目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi
-
详解Vue注册组件的方法
目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com
-
Vue动态组件与内置组件浅析讲解
目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间
-
VUE组件简明讲解
目录 前言 一.全局组件 1.定义 2.全局组件调用 二.局部组件 1.定义 2.局部组件调用 前言 为什么vue就开始在前几年就流行并且实用起来了?这主要的是因为由于vue的一个最强大的功能就是vue的组件,vue的组件到底有什么强大的功能呢?原因有两个,一个是组件的复用性很高:另一个是可以减少重复性的开发. 一.全局组件 1.定义 全局组件的语法是:vue.component(‘组件名’,{配置选项}): 然后,我们进一步理解一下,组件名应该怎么定义:组件名的定义规则是,使用短横线分隔命名,
-
vue弹窗父子组件调用问题示例详解
目录 一.vue弹窗 父子组件 emit 传图片 二.vue父组件调用子组件里的不同方法 一.vue弹窗 父子组件 emit 传图片 1.:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决. 2.此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性. //此为子组件(customComponents.vue) <div> &
-
vue子组件通过.sync修饰符修改props属性方式
目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed
-
Vue组件层级关系详细分析
目录 前言 一.全局组件的层级关系 二.局部组件的层级关系 前言 在这之前,我们已经了解到了vue的组件有哪一些以及这些组件有什么作用,关于组件的博客,大家可以看本博主的往期文章:传送门 可以关注更多的博文进行学习了解.好的,我们进入今天的主题,我们知道组件可以进行调用,网页也可以通过分割的方式在页面中进行嵌套,并且可以在组件层级形成父级和子级.兄弟级别的关系,使得网页开发更加的富有层次感. 一.全局组件的层级关系 全局组件之间的层级关系是在vue进行代码程序执行调用的时候才确定的.我们可以通过
-
详解vue 组件注册
一.了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#ap
-
Vue组件之间的通信方式详细讲解
目录 前言 一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件 二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递 前言 在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系 本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,
-
Vue高级特性概念原理详细分析
目录 1. 自定义v-model 2. $nextTick 3. slot 插槽 4. Vue 动态组件 5. Vue 异步组件 6. 使用 keep-alive 缓存组件 7. mixin 混入 1. 自定义v-model Vue中的自定义v-model指的是在自定义组件中使用v-model语法糖来实现双向绑定.在Vue中,通过v-model指令可以将表单元素的值与组件实例的数据进行双向绑定.但是对于自定义组件,如果要实现v-model的双向绑定,就需要自定义v-model的实现方式. 自定义
-
详细分析vue响应式原理
前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程 文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员 响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响
-
vue.js实例对象+组件树的详细介绍
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方
-
vue组件之间数据传递的方法实例分析
本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&
-
详细分析vue表单数据的绑定
v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.
-
Vue组件跨层级获取组件操作
this.$parent 访问父实例 this.$children 当前实例的直接子组件.(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给元素或子组件注册引用信息. 引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使
-
Vue组件传值过程中丢失数据的分析与解决方案
前言 在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝.这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中.比如函数值,在深拷贝过程中,就会丢失. 问题 在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据. 举例 以基于 el-table 封装的 ak-table 组件