vuejs几种不同组件(页面)间传值的方式
来源:互联网 发布:工业机器人编程用什么 编辑:程序博客网 时间:2024/06/03 19:06
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值。
一、路由传值
路由对象如下图所示:
在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签
this
.$router.push({
name:
'routePage'
,
query/
params
: {
routeParams:
params
}
需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。
这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用。取值方式分别为:this.$route.params.paramName和this.$route.query.paramName
注:使用params传值,也可以做到页面刷新,参数不丢失,在命名路由时这样设置:
{ path: '/OrderDetail/:orderId/:type', name: 'OrderDetail', component: OrderDetail, meta: { title: '订单详情', needAuth: true }}使用时:
this.$router.push({name: 'OrderDetail', params: {orderId: id, type: 'buy'}})这种方式会把路由导航到 /OrderDetail/22aead11a99c4c91aa2169ac17d0ddb5/booking 路径
参考:http://router.vuejs.org/zh-cn/essentials/named-routes.html
二、通过$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'
);
四、通过localStorage或者sessionStorage来存储数据(参考:http://blog.csdn.net/qq_32786873/article/details/70853819)
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
链接:http://www.cnblogs.com/ygtq-island/p/6728137.html
- vuejs几种不同组件(页面)间传值的方式
- vuejs几种不同组件(页面)间传值的方式
- vuejs几种不同组件(页面)间传值的方式
- vue2几种不同组件(页面)间传值的方式
- vue.js几种不同组件(页面)间传值的方式
- asp.net不同页面传值的几种方式
- 不同页面之间实现参数传递的几种方式
- 不同页面间传值的几种方法
- Vuejs——(8)Vuejs组件的定义
- Vuejs——(8)Vuejs组件的定义
- Vuejs 页面的区域化与组件封装
- 不同页面之间实现参数传递的几种方式讨论
- 【笔试题】不同页面之间实现参数传递的几种方式
- VueJs的组件化
- vuejs 组件的认识
- 几种不同的NAT方式
- 几种不同的FTP下载方式
- 几种不同的C++继承方式
- Jmeter Mysql数据库驱动配置
- UEFI原理与编程(六):UEFI工程模块文件-驱动模块工程文件
- 分享一个项目
- 4、SQL安装及配置
- CentOS7安装qemu2.7.0+spice0.12.5过程遇到的问题
- vuejs几种不同组件(页面)间传值的方式
- 【EhCache】Java缓存框架使用EhCache结合Spring AOP
- 349. Intersection of Two Arrays的C++解法
- ScrollView上下滑动修改顶部title背景色淡入淡出
- html中引入js,不同时候引入的区别
- Android属性动画之XML定义方式
- Mybatis 多表关联查询(1) one-to-one关系
- java爬虫学习
- python库numpy的使用