vue实现a组件中数据变化b组件实时更新（ab组件无关联）

需求：A组件新增、编辑或者删除数据时，B组件实时更新数据                

// src/utils/bus.js

// bus.$emit('bridge-updated') 是在事件总线实例 bus 上触发了一个自定义事件
// 'data-updated'，相当于发布了一个事件。

// bus.$on('bridge-updated',()=>{}) 则是在事件总线实例 bus 上监听了自定义事件
// 'data-updated'，一旦该事件被触发，就会执行对应的回调函数。

// 也就是说，通过 bus.$emit 方法，a组件可以在数据更新之后主动发出一个事件；
// 而在b组件中使用 bus.$on 方法，监听了该事件，并在事件触发时执行相应的操作，
// 这就实现了 a组件更新数据时，b组件无感知地重载 的效果。

import Vue from "vue";
export default new Vue();



// main.js

import bus from "@/utils/bus";
// 全局方法挂载
Vue.prototype.bus = bus;

// 组件A

// 在更新数据后，派发自定义事件 bridge-updated

    submitForm() {
      if (this.title === "新增") {
        infoInsert(this.formData).then((res) => {
          if (res.code === 1) {
            this.$message.success("新增成功");
            this.hideDialog();
          }
        });
      } else if (this.title === "修改") {
        infoUpdate(this.formData).then((res) => {
          if (res.code === 1) {
            this.$message.success("修改成功");
            this.hideDialog();
          }
        });
      }
    },


    hideDialog() {
      this.dialogVisible = false;
      this.isDisable = false;
      this.mapData = {
        open: false,
        disabled: false,
      };
      this.$refs.form.resetFields();
      this.$parent.getTableData();
      this.echoImgList = [];
      this.bus.$emit('bridge-updated') // 重点是这个 
    },

// 组件B
// 监听data-updated事件，更新数据并重载

   created() {
      this.bus.$on('bridge-updated', () => {
        this.getBridgeList()
      })
    },


    // 更新数据
    getBridgeList() {
        infoQueryList().then(res => {
          if (res.code === 1) {
            this.bridgeList = res.data
          }
        })
      }