Vue页面间传值

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

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

• 路由传值
• 本地储存
• eventbus

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

• 本地储存
• eventbus

一、正向传值

• 路由传值

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页面代码

// 本地获取搜索信息
activated() {
    var param = localStorage.getItem("searchParam");
    this.param = param;
},

• eventbus
  不同组件之间传值
  场景：小项目，页面量较少的情况下使用

初始化
首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。新创建一个 .js 文件，比如 common -> js -> eventbus.js

// eventbus.js 

//创建一个中央事件总线
import Vue from 'Vue'
export default new Vue()

A页面代码（定义一个 emit 发送需要传递的值）

import bus from '@/common/js/eventbus.js';

goDetail: function (item) {
    bus.$emit('remind', item);
    this.$router.push({
        path: '/detail'
    });
}

B页面代码（在需要接收参数的组件中，用 on 接收该值）

import bus from '@/common/js/eventbus.js';

/**
 * 生命周期函数--对象激活状态
 */
activated() {
    // 进入页面时执行 bus 的 on 打开方法
    this.getParamValue();
}
/**
 * 生命周期函数--销毁前状态
 */
beforeDestroy() {
    // 销毁前执行 bus 的 off 关闭方法
    bus.$off('remind');
}
getParamValue() {
    var that = this;
    bus.$on('remind', (item) => {
        that.remindItem = item;
    })
},

二、反向传值

• 本地储存

B页面代码

/* 把信息异步存储到缓存当中 */
goBack: function () {
    localStorage.setItem("stack", "pop");
    // 返回上一页
    this.$router.back();
},

A页面代码

/**
 * 生命周期函数--对象激活状态
 */
activated() {
    // 如果是从提醒、重复页面返回的
    let stack = localStorage.getItem("stack");
    if (stack == "pop") {
        return;
    }
  
},

• eventbus

初始化
首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。新创建一个 .js 文件，比如 common -> js -> eventbus.js

// eventbus.js 

//创建一个中央事件总线
import Vue from 'Vue'
export default new Vue()

B页面代码

import bus from '@/common/js/eventbus.js';

cellSelected: function (item) {
    bus.$emit('remind', item);
    // 返回上一页
    this.$router.back();
}

A页面代码

import bus from '@/common/js/eventbus.js';

/**
 * 生命周期函数--对象激活状态
 */
activated() {
    // 进入页面时执行 bus 的 on 打开方法
    this. getRemindPageValue();
}
/**
 * 生命周期函数--销毁前状态
 */
beforeDestroy() {
    // 销毁前执行 bus 的 off 关闭方法
    bus.$off('remind');
}
getRemindPageValue() {
    var that = this;
    bus.$on('remind', (item) => {
        that.remindItem = item;
    })
},