-
创建事件总线
在
src
目录下创建一个新的文件,例如eventBus.js
,并添加以下代码:import Vue from 'vue';
export const EventBus = new Vue(); -
在当前组件中触发事件
在第一个组件的
Upby3
方法中,调用事件总线来触发事件: -
import { EventBus } from './eventBus'; // 根据实际路径调整
methods: {
Upby3: function (id) {UpdatebyAction(that.url.Updateby, { id: id }).then((res) => {
if (res.success) {
that.reCalculatePage(1);
that.$message.success(res.message);
that.loadData();// 触发事件通知其他组件数据已更新
EventBus.$emit('data-updated');
} else {
that.$message.warning(res.message);
}
});
}
}
-
在另一个组件中监听事件
在第二个组件中,监听
data-updated
事件并刷新表格数据:import { EventBus } from './eventBus'; // 根据实际路径调整
data() {
return {
tableData: []
};
},
methods: {
getselctable() {
selctTable().then(res => {
const result = res.result;
if (result.length > 0) {
this.tableData = result;
}
});
}
},
watch: {
tableData(newVal) {
// 监听数据更新事件
EventBus.$on('data-updated', () => {
this.getselctTable();
});
}
},
mounted() {
this.getselctTable();
}