Vue页面间传值

Vue传值的方式有正向传值和反向传值

正向传值：上一页面 --> 下一页面

• 路由传值
• 本地储存
• eventbus
• vuex（暂不展开）

反向传值：下一页面 --> 上一页面

• 本地储存
• eventbus
• vuex（暂不展开）

一、正向传值

• 路由传值

A页面代码

// 跳转到搜索页
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
  又称为事件总线。是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件
  场景：小项目，页面量较少的情况下使用

注意事项：

1. 事件订阅($on)必须在事件广播($emit)前注册
2. 取消事件订阅($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

注意事项：

1. 事件订阅($on)必须在事件广播($emit)前注册
2. 取消事件订阅($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');
}