Vue项目中一个页面调用另一个页面里的方法实现

在调用方法页面和被调用方法页面同时引入中间js,通过中间js来进行方法调用
新建一个中间js命名为MiddleUtil.js

中间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: '123',
					b: '456'
				}
				MiddleUtil.$emit('methodB',data);
			}
		}
	}
</scripts>

你可能感兴趣的:(前端,vue.js,javascript,前端)