vue引入id3_Vue页面间传值,客户端数据存储,以及父子组件间props传值
初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正。
一.参数传值
如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值。
这里页面是通过路由跳转的,所以参数传值有两种方法,也就是借助$router的两个参数【params】和【query】。
页面跳转的话,可以通过页面路由的名称name或路径path去定义目标页面。
定义一个v-on:click="turnToPost(item.id)” 方法,进行页面跳转和传值。
传值页面:
…………
data() {return{
postList: [
{
id:1,
title:"I’ll think of you every step of the way.",
time:"JANUARY 05, 2019",
content:"Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"},…………
]
};
},
methods: {
turnToPost: function(id) {//参数传值
this.$router.push({
name:"about",//页面//path: '/blog/about',//name和path用其一就可以
params: { id: id, postList:JSON.stringify(this.postList) },
query: { id: id }
});
}
}
};
取值页面:
mounted:el挂载到实例上后调用,一般第一个业务逻辑会在这里开始。所以我们把取值放到mounted()函数中。
about
data() {return{};
},
mounted: function() {this.$nextTick(function() {
let id= this.$route.params.id; //params
let posts = JSON.parse(this.$route.params.postList);
let id2= this.$route.query.id; //query
console.log("$route", this.$route);
console.log("params", id);
console.log("query", id2);
console.log("posts", posts);
});
},
methods: {}
};
控制台输出的结果如下图:
二.缓存传值
通过localStorage和sessionStorage存储一个全局变量,在任何地方都可以取用。
传值页面:
…………
data() {return{
postList: [
{
id:1,
title:"I’ll think of you every step of the way.",
time:"JANUARY 05, 2019",
content:"Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"},…………
]
};
},
methods: {
turnToPost: function(id) {//缓存传值
localStorage.setItem('id',id);
sessionStorage.setItem('id',id);this.$router.push({
name:"about",//页面//path: '/blog/about',//name和path用其一就可以
});
}
}
};
取值页面:
about
data() {return{};
},
mounted: function() {this.$nextTick(function() {
let id3= localStorage.getItem("id"); //localStorage
let id4 = sessionStorage.getItem("id"); //sessionStorage
console.log("localStorage", id3);
console.log("sessionStorage", id4);
});
},
methods: {}
};
控制台输出结果如下图:
Ps.
1.localStorage和sessionStorage的存储数据大小一般都是5MB,且存储在客户端,不需要持续的将数据发回服务器。
2.localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。
手动移除localStorage和sessionStorage缓存方法:
//根据键删除缓存
localStorage.removeItem('id');
sessionStorage.removeItem('id');//删除所有缓存数据
localStorage.clear();
sessionStorage.clear();
3.localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
Ps.
this.$nextTick():将回调延迟到下次 DOM 更新循环之后执行。监测DOM更新完成,再请求数据,所以应该放到请求的回调函数里面。
三. 组件传值
子组件页面(About.vue):
在子组件中,props中定义想要从父页面传过来的值,此处定义了一个"msg",并显示在页面上。
{{msg}}
name:'about',
props: ['msg']
}
父页面(App.vue):
1.在父页面中引入about组件
import about from './views/About'
components: {
'about': about
}
2.在使用子组件的地方传值
把父页面的parentMsg赋值给子组件的msg,当parentMsg值变化时,msg也会发生变化。
data () {return{
parentMsg:'test'}
},
components: {'about': about
}
}
演示图如下:
以上就是Vue页面传值的两种方法,欢迎补充指正!
/****************************我是可爱的分割线********************************/
vue引入id3_Vue页面间传值,客户端数据存储,以及父子组件间props传值相关推荐
- 系统总结vue组件间通信、数据传递(父子组件,同级组件)
总结一下对vue组件通信的理解和使用. 一.组件目录结构 父组件:app.vue 子组件:page1.vue 子组件:page2.vue 父组件 app.vue <template>< ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 初识 Vue(18)---(非父子组件间的传值)
非父子组件间的传值 常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分 下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
- VUE:父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
- vue 跳添加编辑页面传两个值_vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改 ...
- VUE父子组件之间的传值,以及兄弟组件之间的传值;
一.Vue父子 组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
- Vue-非父子组件间的传值
文章目录 非父子组件间的传值 使用总线方式 使用方式 完整代码 使用vuex方式 非父子组件间的传值 参考官方文档:https://cn.vuejs.org/v2/guide/migration.ht ...
- vue父子组件之间的传值,及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
- vue父子组件及非父子组件之间的传值
一.父组件向子组件传值 在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...
最新文章
- 另一个.java文件调用_java - 如何调用另一个类“写文件”的方法? - SO中文参考 - www.soinside.com...
- java odbc dbf,什么是Java的最佳开源dbf驱动程序?
- nested exception is java.lang.IllegalStateException: Context namespace element 'annotation-config' a
- python数据结构与算法(13)
- Python快速定位工作目录
- 赋能网安生态通信服务器操作系统,紫光展锐打造操作系统生态,赋能万物互联智能时代...
- 使用Laravel Eloquent ORM 时如何查询表中指定的字段 1
- 职称计算机 高级会计,高级会计《职称计算机》网络应用:Windows防火墙
- mysql CMD命令
- redis之消息订阅发布
- 为了实现搜索引擎功能,将正则进行到底!
- github 思维导图开元软件_最强大脑!这 7 款开源思维导图工具真的很神奇
- 精益标准工时软件VIOOVI:没有标准工时,别谈精益改善!
- Layui的下拉框样式失效问题
- matlab电路图powergui怎么用,使用matlab中的powergui对采集的数据进行谐波分析#实验日记#...
- 计算机网络(自顶向下方法)-应用层
- 嗯,我是一个偏执狂。
- 在GitHub上建立自己在线简历
- HTML荧光文字动态效果,利用HTML5实现文字放射发光动画特效
- Windows7 任务栏功能的开发
热门文章
- scikit-learn学习笔记(四)Ridge Regression ( 岭回归 )
- Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors
- 各大公司广泛使用的在线学习算法FTRL详解
- 当我们在谈论HTTP缓存时我们在谈论什么
- 结合zxing 和zbar 扫一扫
- linux每日命令(30):Linux 用户及用户组相关文件、命令详解
- Java注解(1)-注解基础
- iOS NSOperation 非并发执行
- 精简系统绝对不可删除的应用程序
- Win2003环境下简单的安全配置