1. 业务场景

在表单设计中，我们在表单设计中增加了一个列表组件，这个列表组件的点击按钮，比如添加数据，编辑数据等，是需要打开jpaas-vue 的表单方案实现数据添加，编辑的。在表单组件中如果直接写表单方案的数逻辑，这样代码就会重复。
通过事件通讯机制我们来实现数据解耦，办法就是在表单组件中抛出事件，在jpaas-vue 监听此事件，实现表单的添加和编辑。

2. 实现步骤

2.1 VUE BUS组件

这个组件在jpaas-common-lib 中定义。

function VueBus(Vue) {
    const bus = new Vue()

    Object.defineProperties(bus, {
        on: {
            get() {
                return this.$on.bind(this)
            }
        },
        once: {
            get() {
                return this.$once.bind(this)
            }
        },
        off: {
            get() {
                return this.$off.bind(this)
            }
        },
        emit: {
            get() {
                return this.$emit.bind(this)
            }
        }
    })
    Object.defineProperty(Vue, 'bus', {
        get() {
            return bus
        }
    })
    Object.defineProperty(Vue.prototype, '$bus', {
        get() {
            return bus
        }
    })
}
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(VueBus)
}
export default VueBus;

2.2 在表单组件中发布事件

onAdd(){
        var alias= this.formBoList.formAddAlias?this.formBoList.formAddAlias:this.formBoList.formAlias;
        var params={
          action:"add",
          formdata:this.formdata,
          alias:alias,
          name:this.formBoList.name,
          table:this.table
        }
        this.$bus.emit("listButtonEvent",params);
    },

在列表组件的按钮点击事件中，我们发布一个listButtonEvent ，并传出必要的参数。

2.3 在jpaas-vue 中监听事件

编写代码 ListController.js 。

export  default {
  data(){
    return {
      table:{}
    }
  },
  created(){
    this.$bus.on("listButtonEvent",(obj)=>{
      this.handButtonClick(obj);
    });
  },

在 created()事件中添加订阅发布的列表事件。

为了保证这个事件只被监听一次，我们将 ListController 混入了 App.vue

import ListController from "@/views/modules/form/core/formsolution/ListController";

export default {
  mixins: [ListController],