vue2低代码平台搭建（三）组件间交互的实现

前言

大家好，我是L丶Y，我们在上一篇文章中主要介绍了低代码平台的页面设计器相关的一些功能原理，打通了页面设计器顶部操作栏、左侧组件列表，中间画布、右侧属性配置四个部分的关系。能够实现组件列表的展示、组件到画布的拖动，属性配置修改对组件渲染效果影响，并说明了页面设计器中设计好的页面是如何进行渲染的。

虽然我们看起来实现了通过组件拖拉拽完成页面的开发，但是目前的页面还是无法进行使用的，这是因为页面中的组件都是相互独立而又没有关联的。实际页面中的绝大多数组件都需要进行相互通讯。例如当我们点击某个按钮时，需要获取到表单组件的表单值进行提交；又比如我们点击某个按钮会弹出一个弹窗。我们这一篇文章将重点分析一下在低代码开发中组件间交 互的实现方式。

事件

事件的分类

我们主要依托于事件来进行组件间的交互。为了满足组件与组件、组件与系统、组件与服务端的交互，我们大致可以将事件分为三个类别：

1. 组件方法：每个组件都会暴露出一些方法供其他组件进行调用。例如表格组件，我们可以暴露出查询表格数据方法；弹窗组件，可以暴露打开、关闭方法等等。
2. 系统动作：有些方法并不属于某个组件，而是系统全局的动作，例如路由的跳转、全局的消息提示、页面