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

前言

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

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

事件

事件的分类

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

1. 组件方法：每个组件都会暴露出一些方法供其他组件进行调用。例如表格组件，我们可以暴露出查询表格数据方法；弹窗组件，可以暴露打开、关闭方法等等。
2. 系统动作：有些方法并不属于某个组件，而是系统全局的动作，例如路由的跳转、全局的消息提示、页面加载动画的显隐等等。-
3. API调用：这一类主要用于处理组件与服务端的交互，也就是服务端api接口的调用。

事件的定义