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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐