Vue中跨页面调用方法
在调用方法页面和被调用方法页面同时引入中间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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步