今天总结一下,两个页面不嵌套,兄弟组件的情况下,如何调用另一个页面的方法
方法一:vm.$on(event,callback)
1.新建一个工具函数bus.js,代码如下:
import Vue from 'vue'
export default new Vue;
2.然后两个页面都引用它
import bus from './bus'
被调用方:
mounted(){
util.$on('test',(msg)=>{
console.log(msg);
this.getData();
})
},
methonds:{
getData(){
console.log('执行getData代码')
}
},
调用方:
methonds:{
async addApp(val){
await addApp({val}).then( (res) => {
if(res.status){
this.$message("操作成功")
//触发兄弟页面的方法getData
bus.$emit('test','01')
}
})
}
}
方法二:vuex
1.新建store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
list:[]
},
mutations: {
setList(state,payload){
state.list = payload
}
},
actions: {
getList({commit}){
getList().then(res=>{
commit('setList',res.data)
})
}
}
});
export default store;
2.使用
被调用方:
import {mapAction,mapState} from 'vuex'
computed:{
...mapState([
'list'
])
},
methonds:{
...mapAction([
'getList'
])
},
mounted(){
this.getlist()
}
调用方:
import {mapAction} from 'vuex'
methonds:{
...mapAction([
'getList'
]),
functionA(){
this.getList()
}
}