详解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 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
jquery图形密码实现方法
Mar 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
德劲1103的维修打理经验
2021/03/02 无线电
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
在Django框架中设置语言偏好的教程
2015/07/27 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python画图常规设置方式
2020/03/05 Python
护士检查书
2014/01/17 职场文书
应急处置方案
2014/06/16 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
详解Go语言中Get/Post请求测试
2022/06/01 Golang