vue的父与子组件的访问
父访问子 (需要掌握)
this.$children 和 this.$refs
this.$children 返回的是一个数组,包含父组件的所有子组件 this,$refs 返回的是一个对象,默认为空,返回父组件中所有标签带有ref属性的子组件
this.$children 是获取父组件的所有子组件,然后返回一个数组 (不常用)
this.$refs 则是通过给 组件标签上 加上一个 ref属性,然后在父组件中调用 this.$refs时才会返回 一个对象 (常用,用的非常多 基本都是用这个)
例如 子组件标签 <cpn ref="mm"></cpn> 通过this.$refs 他就会返回一个对象 {mm:Vuecomponent} 而mm就作为一个key,我们通过this.$refs.mm 就能拿到这个组件,之后就可以拿到具体的值了
子访问父 (不常用)
this.parent 访问父组件 this.root 访问根组件 (都用得少)
vue的父与子组件的访问的更多相关文章
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
- vue $emit $on 从子组件传递数据给父组件
原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...
- Vue(13)子组件与父组件超详细解析
父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...
- vue 中 echart 在子组件中只显示一次的问题
问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是 ...
- 总结vue中父向子,子向父以及兄弟之间通信的几种方式
子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...
随机推荐
- 《手把手教你》系列技巧篇(五十七)-java+ selenium自动化测试-下载文件-下篇(详细教程)
1.简介 前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...
- YC-Framework版本更新:V1.0.5
分布式微服务框架:YC-Framework版本更新V1.0.5!!! 本次版本V1.0.5更新 所有模块依赖调整: 部分问题修复: Nacos模块化: Eureka模块化: 支持SOA(即WebSer ...
- [C语言基础] 数组与指针之间的引用
通过指针引用数组,通过数组引用指针,你搞明白了么?通过下面3种情形来了解一下数组和指针 Case 1. unsigned char arry[10]; unsigned char *ptr; unsi ...
- 实习之bii--源码安装bind9
刚学习linux时安装过fctix小企鹅输入法,那个比这个安装还要复杂,不过在这里也写一写,还是用的./configure make makeinstall这套命令.不像fctix有些高版本开始用cm ...
- pytest文档7-计算单元测试代码覆盖率(pytest-cov)
pytest-cov 先命令行安装 pytest-cov 2.10.1版本 pip install pytest-cov==2.10.1 环境要求:1.python3.6.6 版本备注:其它版本没试过 ...
- 一段关于java NIO server端接受客户端socket连接;演示了关于channel,selector等组件的整合使用
public class ReactorDemo { public static void main(String[] args) throws IOException { ServerSocketC ...
- golang中浮点型底层存储原理和decimal使用方法
var price float32 = 39.29 float64和float32类似,只是用于表示各部分的位数不同而已,其中:sign=1位,exponent=11位,fraction=52位,也就 ...
- nginx模块lnmp架构
目录 一:关于lnmp架构 二:目录索引模块 1.目录索引模块内容 1.开启目录索引(创建模块文件) 2.测试 3.重启nginx 4.配置域名解析DNS 5.网址测试 二:目录索引(格式化文件大小) ...
- ARP链路追踪
arp协议在TCP/IP模型中属于IP层(网络层),在OSI模型中属于链路层.arp协议即地址解析协议,是根据IP地址获取物理地址的一个TCP/IP协议.它可以解决同一个局域网内主机或路由器的IP地址 ...
- 如何快速写出高质量的 Go 代码?
前言 团队协作开发中,必然存在着不同的代码风格,并且诸如 http body close,unhandled error 等低级错误不能完全避免.通过使用 ci lint 能够及早的发现并修复问题,提 ...