Vue传值的方式有正向传值和反向传值
正向传值：上一页面 --> 下一页面
- 路由传值
- 本地储存
- eventbus
- vuex（暂不展开）
反向传值：下一页面 --> 上一页面
- 本地储存
- eventbus
- vuex（暂不展开）
一、正向传值
- 路由传值
A页面代码
<div class="wrapper">
<div class="search-view" @click="search">
</div>
// 跳转到搜索页
search() {
var ticket = getTicketParameter("ticket");
this.$router.push({
// path: '/search',
path: `/search?ticket=${ticket}`,
query: {param: this.param}
});
},
B页面代码
/**
* 生命周期函数--创建完毕状态
*/
created() {
var param = this.$route.query.param;
this.param = param;
},
- 本地储存
A页面代码
/* 把搜索信息异步存储到缓存当中 */
// 跳转到搜索页
search() {
localStorage.setItem("searchParam", JSON.stringify(this.param));
},
B页面代码
// 本地获取搜索信息
created() {
var param = localStorage.getItem("searchParam");
this.param = param;
},
- eventbus
又称为事件总线。是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件
场景：小项目，页面量较少的情况下使用
注意事项：
- 事件订阅($on)必须在事件广播($emit)前注册
- 取消事件订阅($off)必须跟事件订阅($on)成对出现
初始化
首先你需要做的是创建事件总线并将其导出，以便其它?？榭梢允褂没蛘呒嗵?。新创建一个 .js 文件，比如 common -> js -> eventbus.js
// eventbus.js
//创建一个中央事件总线
import Vue from 'Vue'
export default new Vue()
A页面代码（定义一个 emit 发送需要传递的值）
import bus from '@/common/js/eventbus.js';
goPage: function () {
this.$router.push({
path: '/pageB'
});
},
beforeDestroy(){
// 事件广播
bus.$emit("remind", "A组件需要往B组件传递的值");
}
B页面代码（在需要接收参数的组件中，用 on 接收该值）
import bus from '@/common/js/eventbus.js';
/**
* 生命周期函数--创建完毕
*/
created() {
// 进入页面时执行 bus 的 on 打开方法
// 事件订阅
bus.$on("remind", (str) => {
console.log(str)
});
},
/**
* 生命周期函数--销毁前状态
*/
beforeDestroy() {
// 销毁前执行 bus 的 off 关闭方法
bus.$off('remind');
}
二、反向传值
- 本地储存
B页面代码
/* 把信息异步存储到缓存当中 */
goBack: function () {
localStorage.setItem("stack", "pop");
// 返回上一页
this.$router.back();
},
A页面代码
/**
* 生命周期函数--创建完毕
*/
created() {
// 如果是从提醒、重复页面返回的
let stack = localStorage.getItem("stack");
if (stack == "pop") {
return;
}
},
- eventbus
注意事项：
- 事件订阅($on)必须在事件广播($emit)前注册
- 取消事件订阅($off)必须跟事件订阅($on)成对出现
初始化
首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。新创建一个 .js 文件，比如 common -> js -> eventbus.js
// eventbus.js
//创建一个中央事件总线
import Vue from 'Vue'
export default new Vue()
B页面代码
import bus from '@/common/js/eventbus.js';
goBack: function () {
// 返回上一页
this.$router.back();
},
beforeDestroy () {
// 事件广播
bus.$emit('remind', "B组件需要往A组件传递的值");
}
A页面代码
import bus from '@/common/js/eventbus.js';
/**
* 生命周期函数--创建完毕
*/
created() {
// 进入页面时执行 bus 的 on 打开方法
// 事件订阅
bus.$on("remind", (str) => {
console.log(str)
});
}
/**
* 生命周期函数--销毁前状态
*/
beforeDestroy() {
// 销毁前执行 bus 的 off 关闭方法
bus.$off('remind');
}
