Vue一个页面调用另一个页面的方法

Vue项目，在一个页面中想调用另一个页面的方法，可以用下面两种方式
方式一
在当前页面引入被调用方法页面

<template>
	<BPage ref="bPage"/>
</template>
<scripts>
	import BPage from './BPage';
	export default {
		compoments: {
			BPage
		}
		methods: {
			methodA() {
				//调用页面BPage的方法
				this.$refs.bPage.methodB();
			}
		}
	}
</scripts>

使用这种方式可以通过this.$refs.bPage.property1 = ‘aa’的语句来修改页面BPage的属性值
方式二
在调用方法页面和被调用方法页面同时引入中间js，通过中间js来进行方法调用
将中间js命名为MiddleUtil.js，代码为

import Vue from 'vue';
Export default new Vue;

被调用方法页面代码

<scripts>
	import MiddleUtil from '../util/MiddleUtil';
	export default {
		data() {
			return {
				property1: ''
			}
		}
		methods: {
			methodB(data) {
				if (data) this.property1 = data;
			}
		}
		mounted: {
			let _this = this;
			MiddleUtil.$on('methodB',(data)=> {
				_this.methodB(data);
			})
		}
	}
</scripts>

调用方法页面代码

<scripts>
	import MiddleUtil from '../util/MiddleUtil';
	export default {
		methods: {
			methodA() {
				let data = {
					a: '嘿嘿',
					b: '哈哈'
				}
				MiddleUtil.$emit('methodB',data);
			}
		}
	}
</scripts>