关于Vue中$refs的探索浅析


Posted in Javascript onNovember 05, 2020

最近公司在做一个新项目,出需求,原型图,UI图,接下来就轮到我了,画页面。在画页面的过程中,涉及到父子路由,于是,便自然想到了<router-view></router-view>,按照以往的操作,确定父子关系,配置好路由,就OK了。但是,对照需求文档,仔细一看,后期联调肯定要涉及父子页面传递参数啊,比如下图:

关于Vue中$refs的探索浅析

我要在父页面拿到子页面form表单的数据, 如何做?

首先我想到的就是,通过this.router.push({name: "", params:{} }), 将参数带到父页面,但是这种方法行不通,因为子页面没有跳转按钮,没有触发事件。于是,我又想到了Vuex,将子页面的form表单数据存储到store中,但是这对于多个子页面,就要建立多个store。不太合适。

那还有什么办法呢?咦,我可不可以通过$refs拿到子页面实例呢?试一把,哈哈,果然可以。这就太好了,拿到子页面实例,也就可以拿到子页面数据,然后在父页面如何操作,那就随意了,,,哈哈哈。

具体操作如下图:

关于Vue中$refs的探索浅析

关于Vue中$refs的探索浅析

总结

到此这篇关于Vue中$refs探索的文章就介绍到这了,更多相关Vue中$refs探索内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
jquery 插件学习(二)
Aug 06 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Vue进度条progressbar组件功能
Apr 17 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
You might like
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js实现时钟定时器
2020/03/26 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
运动会观后感
2015/06/09 职场文书
七一晚会主持词
2015/06/29 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
应收账款管理制度
2015/08/06 职场文书
工伤调解协议书
2016/03/21 职场文书