vue毫无关系的两个页面之间的调用

关注

转载最新推荐文章于 2026-02-27 12:33:15 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

vue通过Vuex实现多页面的数据联动一、需求问题在vue的开发中，可能会经常遇到这样的需求。在一个页面中有一些选择的信息，比如说城市列表信息，当选择不同的城市信息后，所有相关页面的数据都会发生变化，也就是多页面的数据联动。这种多页面的数据联动在外卖平台、生鲜平台、电影平台等等是非常常见的。二、需求分析针对多页面的数据联动，我们可以使用Vuex配合本地存储区解决。关于Vuex和localStorage的结合，可以看一下我之前写的... 阅读详情

EventBus相当于系在两个组件的桥梁，两个页面通过EventBus进行传递参数，调用方法。

示例： A页面调用B页面的方法

1.第一步：建立EventBus文件

在src下建立utils文件夹，utils文件夹下创立EventBus.js

import Vue from 'vue';
 /**
  * 事件总线
  * @usage:
  * EventBus.$emit('event',payload);
  * EventBus.$on('on',(payload)=>{});
  */
 const EventBus = new Vue();
 export default EventBus

第二步：A文件（两个页面都要引用EventBus文件）：

<template>
	<div>
		<div class="button" @click="toBpage">点击向B页面传递参数</div>
	</div>
</template>
<script>
    import Bus from "@/utils/EventBus";
    export default {
      data() {
        return {
	      id:'12345' //a向b传递的参数
	    }
	  },
	  methods:{
	  	toBpage(){
	  	  // getId 是自己命名的b页面也通过同一个名字接受参数，this.id 是参数
      	   Bus.$emit("getId", this.id);
        }
	  }
     }
</script>

第三步：B文件（两个页面都要引用EventBus文件）：

<script>
    import EventBus from "@/utils/EventBus";
    export default {
      data() {
        return {
	      aId:'' 
	    }
	  },
	  mounted(){
	  // 获取a传过来的id
  	    EventBus.$on("getId", (id) => {
	      //a传来的参数
	      console.log(id,'----id')
	      this.aId = id  //可以赋值
	      this.getList(id) // 可以做其他操作
	    });
	  }
	  methods:{
	  	getList(id){
	  	  // 获取数据
        }
	  }
     }
</script>

收录于