Vue一个页面调用另一个页面的方法
Vue项目,在一个页面中想调用另一个页面的方法,可以用下面两种方式方式一在当前页面引入被调用方法页面<template><BPage ref="bPage"/></template><scripts>import BPage from './BPage';export default {compoments: {BPage}methods: {met
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)