layer中嵌套的页面如何操作父页面_vue中8种组件通信方式,值得收藏
有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明:
如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为:
- 父子组件之间通信
- 非父子组件之间通信(兄弟组件、隔代关系组件等)
一、props / $emit
父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。
1. 父组件向子组件传值
下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义']
// section父组件复制代码// 子组件 article.vue
{{item}}
复制代码
总结: prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。
2. 子组件向父组件传值
对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。 在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标
// 父组件中
{{currentIndex}}
复制代码
{{item}}
复制代码
// 父组件中
{{msg}}
点击改变子组件值
复制代码// 子组件中
{{messageA}}
获取父组件的值为: {{parentVal}}
复制代码
要注意边界情况,如在#app上拿$parent得到的是new Vue()的实例,在这实例上再拿$parent得到的是undefined,而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样,$children 的值是数组,而$parent是个对象
总结
上面两种方式用于父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。
三、provide/ inject
概念:
provide/ inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。
注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中回去数据
举例验证
接下来就用一个例子来验证上面的描述: 假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件,B是A的子组件
// A.vue
layer中嵌套的页面如何操作父页面_vue中8种组件通信方式,值得收藏相关推荐
- layer中嵌套的页面如何操作父页面_layui框架中layer父子页面交互详细解说
本文主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下,希望给大家的 ...
- 中嵌套的页面如何操作父页面_UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
- iframe子页面操作父页面
2019独角兽企业重金招聘Python工程师标准>>> 最近经常用到iframe,用的最多的就是在子页面中操作父页面的方法或变量等,总结了用到的几种方法,如下: var tableN ...
- Layer弹出层关闭后刷新父页面
一.Layer弹出层关闭后刷新父页面 //编辑 $("#edit").on("click", function(){var id = getIdSelectio ...
- php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
- 父页面调用子页面方法, 子页面加载父页面传送的数据
先看效果图就明白需求了: 点击search查询结果集, 点击某一条将该条的其他信息分别加载到tab1和tab2中, 即net bill和other amount这两个tab. 点击clear清空查询条 ...
- 非vue子页面 调用vue父页面方法
由于要使用之前项目使用的页面,需要从非vue iframe子页面调用vue项目 1.父页面 <iframe :src="value.urlPath" frameborder= ...
- vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录 vue 页面内切换dom,页面跳转后 都不置顶? 一.页面内操作: 1.1 代码如下: 二.页面之间跳转: 2.1 代码截图 · 说明: 2.2 增加代码 · 示下: 三.拓展 · (直接置 ...
- jQuery如何去判断页面是否有父页面?
jQuery如何去判断页面是否有父页面? 是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) { alert('我在框架里'); } 转载于:htt ...
最新文章
- java学mybatis还用学jdbc吗,mybatis系统学习(二)——使用基础mybatis代替原始jdbc
- CentOS下挂载硬盘(fdisk,mkfs.ext4,mount)
- 常用API-3(System类、Math类、Arrays类、正则表达式)
- Exp8 web基础
- SAP Spartacus 服务器端渲染的单步调试
- 判断字符串中是否为数字的三种方法
- 游戏开发中的数据表示
- Digital Text Animations for Mac - 未来感活力全屏标题动画fcpx插件
- 企业级自动化运维神器Ansible
- 计算机编程英语怎么写,计算机编程英语词汇大全.pdf
- 孩子春节猛吃零食怎么办?专家支招:先用蔬菜填饱肚子
- 【大话Mysql面试】-Mysql常见面试题目
- sublime报错信息乱码_Sublime如何解决中文乱码问题
- 恭贺除夕,没什么才艺展示,就给大家画新年四格小漫画吧 >⌒<
- java加密与解密-核心包中的部分API(2)
- 新阿阳发卡网完整运营源码
- springboot全局异常处理BasicErrorController和RestControllerAdvice
- 商务签证之结局:面试
- ACS运动控制:ACSPL+ 总结
- 安防监控流媒体服务器对接宇视摄像机配置OCX插件安装时出现Failed to register ocx, error code 14001错误问题分析
热门文章
- 阿里是如何“宠”员工的?除了福利,还有这满屏黑科技
- 在 Kubernetes 集群中使用 MetalLB 作为 Load Balancer(上)
- 中国电信天翼云进入4.0阶段,打造一朵无处不在的分布式云
- Java面试高频题:Spring Boot+JVM+Nacos高并发+高可用已撸完​
- 万字长文!Unix和Linux你不知道的那些历史(详解版)
- 大厂HR年底绷不住了:怎么招程序员这么难,尤其搞这项技术的!!
- 华为愿出售5G技术渴望对手;苹果将向印度投资10亿美元;华为全联接大会首发计算战略;腾讯自研轻量级物联网操作系统正式开源……...
- 谷歌10月15日发布 Pixel 4;高通以31亿美元收购与TDK公司权益;甲骨文、VMware就云技术及支持达成协议……...
- 聊聊云计算:为什么构建网站时常会用到负载均衡
- 密立根油滴实验的计算机仿真实验报告,H-D光谱实验的计算机仿真