vue 利用$on和$emit进行页面间的跨组件传值和调用

实现目标：两个vue页面没有任何关联，其中vue1页面要调用vue2中的方法。

实现代码：

中间存储实体：

在utils下新建dataCenterBus.js文件

import Vue from 'vue';
export default new Vue();

vue1页面：（调用vue2页面中的方法）

首先引入中间实体文件

import dataCenterBus from '@/utils/dataCenterBus';

在需要调用所需方法处采用$emit引用

引号中为两个vue文件中共同定义的方法名，第二个参数为引用方法所需要传递的参数

dataCenterBus.$emit('xxxxx', xxx);

vue2页面：（提供方法的页面）

首先引入中间实体文件

import dataCenterBus from '@/utils/dataCenterBus';

在mounted处采用$on引用

引号中为两个vue文件中共同定义的方法名，index为传递的参数名，this.clickTopBtn为该页面需要传递的方法，方法名后的index为方法传递的参数。

mounted() {
        dataCenterBus.$on('xxxxx', index => {
            this.clickTopBtn(index);
        });
    },

注：两个vue页面都要引入中间实体dataCenterBus.js文件。