详解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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP 图片上传代码
2011/09/13 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python Requests安装与简单运用
2016/04/07 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
自荐信范文
2013/12/10 职场文书
大学生入党思想汇报
2014/01/14 职场文书
消防安全员岗位职责
2014/03/10 职场文书
刘胡兰观后感
2015/06/16 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
python实现三次密码验证的示例
2021/04/29 Python
java设计模式--原型模式详解
2021/07/21 Java/Android
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL