使用 Vue 的事件总线：为了实现点击当前按钮关注或取消关注时，另一个页面的 Vue 组件中的表格数据自动刷新

创建事件总线

在 src 目录下创建一个新的文件，例如 eventBus.js，并添加以下代码：

在当前组件中触发事件

在第一个组件的 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();
}