详解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学习网址备忘
May 29 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 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
php目录管理函数小结
2008/09/10 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
python发送邮件功能实现代码
2016/07/15 Python
Python程序中设置HTTP代理
2016/11/06 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python实现自动化上线脚本的示例
2019/07/01 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
高中军训感言800字
2014/03/05 职场文书
班级体育活动总结
2014/07/05 职场文书
体育专业求职信
2014/07/16 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
个人年度总结报告
2015/03/09 职场文书
新教师教学工作总结
2015/08/14 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js