lowcode-communication-vue

• 组件通信机制实现
• 低代码平台
• vue

Project setup

npm install --save vue-lowcode-communication

use

示例

简单实现两个组件之间的通信 InitateComponent -> PassiveComponent

src/componentConfig.js

export const initateComponent = {
  uniqueId: '1'
  // otherParams...
  // 组件自身所支持的通信事件(主动 + 被动)
  eventHooks: [
    {
      // 事件key
      eventKey: "onClickButton",
      // 事件名称
      eventName: "当点击按钮时触发",
      // 事件触发类型：主动 | 被动
      eventType: "INITATE", // INITATE | PASSIVE
      // 接口数据模型
      // 当eventType === 'INITATE'时，eventApiModel为组件可提供参数
      // 当eventType === 'PASSIVE'时，eventApiModel为组件需要的参数
      eventApiModel: [
        {
          key: "index",
          label: "点击项索引",
          type: "number"
        }
      ]
    }
  ],
  // 主动通信触发列表
  triggerActions: [
    {
      // 源模块事件key
      originModuleEventKey: "onClickButton",
      // 源模块事件描述[可选]
      originModuleEvenDesc: "当点击按钮时触发",
      // 目标模块唯一Id
      targetModuleUniqueId: "2",
      // 目标模块描述[可选]
      targetModuleDesc: "我是目标模块",
      // 目标模块事件key
      targetModuleEventKey: "updatePassiveParams",
      // 目标模块事件描述[可选]
      targetModuleEventDesc: "我是更新配置事件哦",
      // 参数映射关系
      paramsMapping: [
        {
          originParamKey: "index",
          targetParamKey: "currentIndex"
        }
      ]
    }
  ]
}

export const passiveComponent = {
  uniqueId: '2',
  // otherParams...
  // 组件自身所支持的通信事件(主动 + 被动)
  eventHooks: [
    {
      // 事件key
      eventKey: "updatePassiveParams",
      // 事件名称
      eventName: "更新参数",
      // 事件触发类型：主动 | 被动
      eventType: "PASSIVE", // INITATE | PASSIVE
      // 接口数据模型
      // 当eventType === 'INITATE'时，eventApiModel为组件可提供参数
      // 当eventType === 'PASSIVE'时，eventApiModel为组件需要的参数
      eventApiModel: [
        {
          key: "currentIndex",
          label: "当前项索引",
          type: "number"
        }
      ]
    }
  ],
  // 主动通信触发列表
  triggerActions: []
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import communication from 'vue-communication'

createApp(App).use(communication).mount('#app')

src/App.vue

<template>
  <template v-for="(item, index) in modules"
            :key="index">
    <component :is="item.id"
               :params="item"></component>
  </template>
</template>

import { initateComponent, passiveComponent } from './componentConfig'

import InitateComponent from './components/InitateComponent.vue'
import PassiveComponent from './components/PassiveComponent.vue'

export default {
  data() {
    return {
      modules: [initateComponent, passiveComponent],
    }
  },
  components: {
    InitateComponent,
    PassiveComponent
  }
}

src/components/InitateComponent.vue

<template>
  <div class="hello">
    <h1>InitateComponent(主动触发事件)</h1>
    <h3>当前索引：{{index}}</h3>
    <button @click="onClickButton">点击</button>
  </div>
</template>

export default {
  name: "InitateComponent",
  props: {
    params: null,
  },
  data() {
    return {
      index: 0,
    };
  },
  methods: {
    // 该方法名必须与配置文件中的eventKey相同
    onClickButton() {
      // 业务逻辑
      this.index++;

      // 如果需要传递给目标组件事件某些数据，需要显式返回一个对象
      // 必须是一个对象，且对象中key要与eventHooks.eventApiModel.key保持一致
      return { index: this.index };
    },
  },
};

src/components/ExampleComponent.vue

<template>
  <div class="hello">
    <h1>InitateComponent(被动触发事件)</h1>
    <h3>来自主动触发事件的索引：{{indexFromInitateComponent}}</h3>
  </div>
</template>

export default {
  name: "PassiveComponent",
  props: {
    params: null,
  },
  data() {
    return {
      indexFromInitateComponent: 0,
    };
  },
  methods: {
    // 该方法名必须与配置文件中的eventKey相同
    // 因为配置关系，这里的方法会被上方InitateComponent组件中onClickButton方法被动触发。passiveParams即onClickButton显式return的数据
    updatePassiveParams(passiveParams) {
      // 业务逻辑
      const { currentIndex = 0 } = passiveParams || {};

      this.indexFromInitateComponent = currentIndex;

      // FIXME:
      console.log("passiveParams:", passiveParams);
    },
  },
};