详解vuejs几种不同组件(页面)间传值的方式


Posted in Javascript onJune 01, 2017

在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。

一、路由传值

路由对象如下图所示:

在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签

this.$router.push({

            name: 'routePage',

            query/params: {

              routeParams: params

            }

          })

需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。

这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用。

二、通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法

通过下面的方法调用:

this.$parent.$data.id //获取父元素data中的id

this.$children.$data.id //获取父元素data中的id

这样用起来比较灵活,但是容易造成代码耦合性太强,导致维护困难

三、通过eventBus传递数据

使用前可以在全局定义一个eventBus

window.eventBus = new Vue();

在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)

eventBus.$emit('eventBusName', id);

在需要接受参数的组件重,用on接受该值(或对象)

//val即为传递过来的值

eventBus.$on('eventBusName', function(val) {console.log(val)})

最后记住要在beforeDestroy()中关闭这个eventBus

eventBus.$off('eventBusName');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
JavaScript组合继承详解
Nov 07 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 #Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 #Javascript
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php 分页原理详解
2009/08/21 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
一些mootools的学习资源
2010/02/07 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
python机器人行走步数问题的解决
2018/01/29 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python中setuptools的作用是什么
2020/06/19 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
幼儿园中班上学期评语
2014/04/18 职场文书
安全生产月活动总结
2014/05/04 职场文书
新农村建设汇报材料
2014/08/15 职场文书
社区护士演讲稿
2014/08/27 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技