详解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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
javascript常用经典算法详解
Jan 11 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
微信小程序实现菜单左右联动
2020/05/19 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
人事档案接收函
2014/01/12 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
学术会议邀请函范文
2014/01/22 职场文书
校庆活动方案
2014/03/31 职场文书
文艺晚会策划方案
2014/06/11 职场文书
大学生创业计划书
2014/08/14 职场文书
党支部书记岗位职责
2015/02/15 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
goland 设置project gopath的操作
2021/05/06 Golang