博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue2---父子组件之间的访问
阅读量:5815 次
发布时间:2019-06-18

本文共 1170 字,大约阅读时间需要 3 分钟。

个人小总结:1年多没有写博客,感觉很多知识点生疏了,虽然工作上能解决问题,但是当别人问到某个知识点的时候,还是迷迷糊糊的,所以坚持写博客是硬道理的,因为大脑不可能把所有的知识点记住,有可能某一天忘了,但是我们工作上还是会使用,只是理论忘了,所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来,特别在面试的时候,别人问你的知识点的时候答不上来那种尴尬,但是平时经常使用到,只是说不出所以来的,因此写博客是最好的思路。

阅读目录

Vue2--父子组件的访问

父组件访问子组件,子组件访问父组件,或者子组件访问根组件,Vue.js 都提供了相对应的API。

1. 父组件访问子组件,使用 $children 或 $refs
2. 子组件访问父组件;使用 $parent
如下代码定义了 父组件<parent-component>,父组件模板定义了2个子组件;在父组件中,通过 this.$children 可以访问子组件。
this.$children 是一个数组,它包含所有子组件的实列;如下代码:

            演示Vue        

理解$refs

在子组件上使用 ref指令,可以给子组件指定一个索引ID,如下代码:

在父组件中,则通过$refs.索引ID访问子组件的实例:

showmsg: function() {  alert(this.$refs.A1.msg);  alert(this.$refs.A2.msg);}

所有的代码如下:

            演示Vue        

理解$parent

下面有一个子组件 child-component 和一个父组件 parent-component, 在子组件中,通过 this.$parent 可以访问到父组件的实例;如下代码:

            演示Vue        

转载地址:http://oxmbx.baihongyu.com/

你可能感兴趣的文章
【阿里云新品发布·周刊】第9期:实时大数据开发难、运维难、应用难?来,一站解决!...
查看>>
Vue项目实战(一)——ToDoList
查看>>
线上内存泄漏引发OOM问题分析和解决
查看>>
Java B2B2C o2o多用户商城 springcloud架构 (一)服务的注册与发现(Eureka)
查看>>
(十二) 整合spring cloud云架构 - SSO单点登录之OAuth2.0 登出流程(3)
查看>>
java B2B2C Springcloud仿淘宝电子商城系统- Gateway运行时动态配置网关
查看>>
java B2B2C springmvc mybatis电子商务平台源码-------zuul网关实现
查看>>
SpringCloud之断路器监控(Hystrix Dashboard)(九)
查看>>
我的友情链接
查看>>
Linux中inittab剖析
查看>>
基于ARM的智能灯光控制系统(5)设备链表
查看>>
layDate时间控件-使用记录_已迁移
查看>>
我的友情链接
查看>>
2. PowerShell -- 脚本执行权限
查看>>
有时OPEN***提示报错,如下错误及解决方法
查看>>
在nginx当中遇到的问题
查看>>
JAVA中重写equals()方法为什么要重写hashcode()方法?
查看>>
压力测试之siege
查看>>
linux系统中挂载windows中的共享文件
查看>>
看过这张图你还记不牢JavaScript的语法和特性,算我输!
查看>>