一. 通过路由带参数进行传值
(1)页面A附加参数(query中值为附带参数)
this.$router.push({ path: '/menu', query: { name: 'zhangsan', time: '2020/7/15' } })
(2)页面B获取地址栏中的参数
this.$route.query.name
获取参数name,参数time以此类推。
缺点:
1)参数直接暴露,安全性不高;
2)参数过长时,影响地址栏美观。
二. 通过设置 sessionStorage/localStorage缓存的形式进行传递
注:sessionStorage(会话存储):生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
localStorage(本地存储):生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。不可跨浏览器共用。
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使用不规范会造成存储空间的浪费和不足。
解决:
1)封装storage的使用方法,统一处理
2)规范storage的key值的命名规则
3)规范storage的使用规范
三. 父子组件之间的传值(待补充)
-
父组件给子组件传值(通过props属性)
-
子组件给父组件传值(通过emit事件)
四. 不同组件之间传值,通过eventBus(待补充)
场景:小项目,页面量较少的情况下使用。
五. vuex进行传值
场景:vuex主要是做数据交互,适用于大项目,页面量较多的业务。
解决难题:兄弟组件间传值(兄弟组件下又有父子组件),或者大型单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。
vuex使用参考:https://vuex.vuejs.org/zh/installation.html
主要代码:在项目的store文件夹中的index,js中创建一个store
export default new Vuex.Store({
state: {
appkey: '',
infokey: ''
},
mutations: {
setAppkey(state,appkey){
state.appkey = appkey;
},
setInfokey(state,infokey){
state.infokey = infokey;
}
},
actions: {},
modules: {}
});
其中 state 中为需要传递的值,mutation中为监控值变化并修改值的方法,通过store.commit()方法来触发状态变更以及store.state来获取状态对象。
store.commit("setAppkey",response.data.HttpData.data.appkey);
store.commit("setInfokey",response.data.HttpData.data.infokey);
console.log(store.state.appkey,store.state.infokey);
欢迎批评指正!!!