不同Vue页面如何进行参数传递

一、实际场景

1、描述

有A、B两个页面；不管是否层级关系。B页面需要用到A页面的数据，A页面如何将数据传递给B页面

2、解决方案

二、具体实现

1、定义全局的Vue对象

// 最好是在main.js中定义
Vue.prototype.$bus = new Vue()

2、A页面

事件监听和关闭要成对出现，后面就不作强调了

// 注册 reques_notify 事件监听
this.$bus.$off('reques_notify').$on('reques_notify', () => {
  // 当监听到 reques_notify 请求后，通过 response_data 事件响应数据
  this.$bus.$emit('response_data', this.form)
})

3、B页面

下面的代码顺序，需要先注册事件监听，然后再发送数据请求；严格按照流程图上面的来

原因：事件如果还没有注册监听，发送的数据就接收不到；必须要在数据发送过来之前就注册事件监听

// 注册 response_data 事件监听，监听A页面发送过来的数据
this.$bus.$off('response_data').$on('response_data', (data) => {
  console.info("接收到响应数据" + data)
})

// 发送数据请求事件通知
this.$bus.$emit('reques_notify')