1. 业务场景

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

2. 实现步骤

2.1 VUE BUS组件

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

  1. function VueBus(Vue) {
  2. const bus = new Vue()
  3. Object.defineProperties(bus, {
  4. on: {
  5. get() {
  6. return this.$on.bind(this)
  7. }
  8. },
  9. once: {
  10. get() {
  11. return this.$once.bind(this)
  12. }
  13. },
  14. off: {
  15. get() {
  16. return this.$off.bind(this)
  17. }
  18. },
  19. emit: {
  20. get() {
  21. return this.$emit.bind(this)
  22. }
  23. }
  24. })
  25. Object.defineProperty(Vue, 'bus', {
  26. get() {
  27. return bus
  28. }
  29. })
  30. Object.defineProperty(Vue.prototype, '$bus', {
  31. get() {
  32. return bus
  33. }
  34. })
  35. }
  36. if (typeof window !== 'undefined' && window.Vue) {
  37. window.Vue.use(VueBus)
  38. }
  39. export default VueBus;

2.2 在表单组件中发布事件

  1. onAdd(){
  2. var alias= this.formBoList.formAddAlias?this.formBoList.formAddAlias:this.formBoList.formAlias;
  3. var params={
  4. action:"add",
  5. formdata:this.formdata,
  6. alias:alias,
  7. name:this.formBoList.name,
  8. table:this.table
  9. }
  10. this.$bus.emit("listButtonEvent",params);
  11. },

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

2.3 在jpaas-vue 中监听事件

编写代码 ListController.js 。

  1. export default {
  2. data(){
  3. return {
  4. table:{}
  5. }
  6. },
  7. created(){
  8. this.$bus.on("listButtonEvent",(obj)=>{
  9. this.handButtonClick(obj);
  10. });
  11. },

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

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

  1. import ListController from "@/views/modules/form/core/formsolution/ListController";
  2. export default {
  3. mixins: [ListController],
文档更新时间: 2021-07-09 14:26   作者:zyg