vue页面间参数传递的方法总结
目录 方法一:通过路由带参数进行传值方法二:通过设置 Session Storage/local Storage缓存的形式进行传递1、 原生用法使用2、 对Session Storage/local Storage缓存进行统一封装方法三:父子组件之间的传值(通过props属性)1、父组件给子组件传值2、子组件给父组件传值(通过emit事件)方法四:不同组件之间传...
目录
方法二:通过设置 Session Storage/local Storage缓存的形式进行传递
2、 对Session Storage/local Storage缓存进行统一封装
方法一:通过路由带参数进行传值
需求:两个页面A,B,页面A传递参数值phase给页面B.
做法:
1)页面A附加参数://更新地址栏里面的信息哦
router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B
2) 页面B获取地址栏中的参数;
this.$route.query.project_id
方法二:通过设置 Session Storage/local Storage缓存的形式进行传递
想了解更多有关sessionStorage/localStorage,请移步:
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916
1、 原生用法使用
window.localStorage['aaa']='一个例子啊'
console.log(window.localStorage.getItem('aaa'))
window.localStorage.setItem('test1',[1,2,3,4,5,6])
window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})
window.localStorage.setItem('test3','dfdfdf')
console.log(window.localStorage.getItem('test1'))
console.log(window.localStorage.getItem('test2'))
console.log(window.localStorage.getItem('test3'))
window.sessionStorage.setItem('test1',[1,2,3,4,5,6])
window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})
window.sessionStorage.setItem('test3','dfdfdf')
console.log(window.sessionStorage.getItem('test1'))
console.log(window.sessionStorage.getItem('test2'))
console.log(window.sessionStorage.getItem('test3'))
缺点:
1)到处直接使用localstorage['aaa']='xxx'这些原生语法实现,这样耦合度太高了,假如有一天需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多
2)起的key的名字难免会重复,而且这样也会造成全局污染
3) 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用
解决:
封装storage的使用方法,统一处理
规范storage的key值的命名规则
规范storage的使用规范
2、 对Session Storage/local Storage缓存进行统一封装
import localstorage from '@src/util/localstorage';
import sessionstorage from '@src/util/sessionstorage';
import storage from '@src/util/storage';
storage.storage('l','djjdjjd','jwejjwjejw',1);
storage.storage('s','djjdjjd','jwejjwjejw',1);
let a = storage.storage('l','djjdjjd',undefined,null);
console.log(a)
例如:页面A,B
页面A中设置:storage.set('s','djjdjjd','jwejjwjejw',1);
页面B中获取:storage.get('s')
ps:Session Storage(程序退出销毁) 和 Local Storage(长期保存)
localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M
方法三:父子组件之间的传值(通过props属性)
1、父组件给子组件传值
父组件核心代码:
ps: SubmitTest 为子组件名称
<SubmitTest :iteration_id='this.iteration_id'/>
子组件核心代码:
props: {
iteration_id: {
type: String
}
2、子组件给父组件传值(通过emit事件)
具体参考:https://www.cnblogs.com/LoveAndPeace/p/7273648.html
方法四:不同组件之间传值,通过eventBus
场景:小项目,页面量较少的情况下使用
使用前可以在全局定义一个eventBus
window.eventBus = new Vue();
在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)
eventBus.$emit('eventBusName', id);
在需要接受参数的组件重,用on接受该值(或对象)
//val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br> console.log(val)<br>})
最后记住要在beforeDestroy()中关闭这个eventBus
eventBus.$off('eventBusName');
方法五:vuex进行传值
场景:vuex主要是是做数据交互,适用于大项目,页面量较多的业务
解决难题:父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手
例子: 两个组件A和B,vuex维护的公共数据是地理位置,现在A和B页面显示的是相同的地理位置。 需求想实现:如果A修改了地理位置,则B页面的显示随之修改,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。
vuex了解:
参考
https://blog.csdn.net/qq_35430000/article/details/79291287
https://www.cnblogs.com/ygtq-island/p/6728137.html
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
更多推荐
所有评论(0)