关于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 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
python实现xml转json文件的示例代码
2020/12/30 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
参观接待方案
2014/03/17 职场文书
法人授权委托书格式
2014/04/08 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
学生检讨书如何写
2014/10/30 职场文书
清洁工个人总结
2015/03/04 职场文书
运动会观后感
2015/06/09 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python