关于Vue中$refs的探索浅析
更新时间：2020年11月05日 14:20:28 作者：cool
这篇文章主要给大家介绍了关于Vue中$refs的探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近公司在做一个新项目，出需求，原型图，UI图，接下来就轮到我了，画页面。在画页面的过程中，涉及到父子路由，于是，便自然想到了<router-view></router-view>，按照以往的操作，确定父子关系，配置好路由，就OK了。但是，对照需求文档，仔细一看，后期联调肯定要涉及父子页面传递参数啊，比如下图：
我要在父页面拿到子页面form表单的数据, 如何做？
首先我想到的就是，通过this.router.push({name: "", params:{} }), 将参数带到父页面，但是这种方法行不通，因为子页面没有跳转按钮，没有触发事件。于是，我又想到了Vuex，将子页面的form表单数据存储到store中，但是这对于多个子页面，就要建立多个store。不太合适。
那还有什么办法呢？咦，我可不可以通过$refs拿到子页面实例呢？试一把，哈哈，果然可以。这就太好了，拿到子页面实例，也就可以拿到子页面数据，然后在父页面如何操作，那就随意了，，，哈哈哈。
具体操作如下图：
总结
到此这篇关于Vue中$refs探索的文章就介绍到这了,更多相关Vue中$refs探索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue项目中如何使用TypeScript相关配置的相关资料,typescript在开发过程中广泛被应用,在这里总结下项目中ts的应用,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了Vue 的router路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
解决Vue.js由于延时显示了{{message}}引用界面的问题
今天小编就为大家分享一篇解决Vue.js由于延时显示了{{message}}引用界面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue2项目配置@指向src路径方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue el-upload上传文件的示例代码，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识，需要的朋友参考下吧2018-09-09
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue监听滚动事件的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue中input标签上传本地文件或图片后获取完整路径的解决方法
本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径，如E:\medicineOfCH\stageImage\xxx.jpg，本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2023-04-04
最新评论