低代码可视化操作手册第四篇

一、进阶使用

组件生命周期

DataSoli中，我们并没有对组件的生命周期做任何封装，完全沿用VUE中生命周期的定义，引用VUE官方的生命周期图示：

初始化运行脚本

在DataSoli中，我们对大部分组件均实现了在组件mounted钩子函数中进行自定义脚本，一般这个脚本都在组件的【交互】-【初始化运行脚本】中进行编辑

在初始化运行脚本中，可以通过this得到当前组件的vm实例，而如果是Echarts图表组件，可以通过this.chart得到Echarts图表的实例。

组件交互

组件交互主要涉及数据交互（数据钻取、数据联动）、DOM交互等。

DataSoli中提供了两种方式实现数据交互：事件总线、内直数据交互流，对于DOM交互，可以通过编辑原生JS或使用JQuery。

DOM交互

DataSoli内置了JQuery，具体JQuery的版本，可以前往API-$查看，大部分情况下我们都可以通过使用JQuery去操作页面中的DOM元素，当然，如果对原生JavaScript更熟悉的，也可以不使用JQuery，我们只是提供多一种选择。

下面通过一些简单的示例说明如何进行一些基本的DOM操作：

示例1：控制单个组件的显隐

操作步骤如下：

1. 先获取图表组件的布局块ID【e4a25c8cfdfe6f4a00ff00828dccec87】，需要注意：一般我们在进行DOM操作时，如果是需要使用ID去获取DOM节点，应该获取的是组件所属布局块的ID，而不是组件ID

2. 在按钮组件的【交互】-【鼠标单击时运行脚本】中添加如下代码

$('e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

示例2：控制多个组件的显隐

此示例中，要求点击按钮之后，同时控制边框组件和柱状图组件的显示隐藏。

实现方式一：

与示例1中的操作同理，我们可以复制边框组件所属布局块的ID与柱状图组件所属布局块的ID，然后在按钮组件的交互脚本中添加如下代码：

// 操作边框组件的显隐

$('105638b80a960d47baf8ce9cb2828c1f').toggle()

// 操作状图组件的显隐

$('e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

或

//JQuery的选择器的使用方式的区别

$('105638b80a960d47baf8ce9cb2828c1f,e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

实现方式二：

实现方式一中是通过ID去查询DOM节点，当我们需要控制的组件显隐的数量比较多时，通过ID的方式就不方便，组件所属布局块中可以给布局块定义自定义Class，基于Class查询多个DOM节点则比较方便， 那么我们给边框组件和柱状图组件都定义Class名称为toggle-div

然后在按钮组件的交互脚本中添加如下代码：

$('.toggle-div').toggle()

事件总线

熟悉VUE的伙伴对于事件总线应该不陌生，DataSoli的事件总线本身就是基于VUE的事件总线EventBus去实现事件的分发，通过在发起事件总线事件时携带回调参数来实现组件之间的数据交互。

虽然通过事件总线的方式实现组件交互，需要用户具备一定的前端编程基础，但事件总线方式，也是最灵活的一种方式。

下面将通过一个【Tab列表组件与多行文本组件之间的数据交互】示例来说明如何使用事件总线

如上图所示，其中多行文本组件中的数据是通过API接口请求获取的数据，我们需要在用户点击Tab列表中的某项之后，改变多行文本组件的API请求参数。

首先多行文本组件的API接口地址为：

http://localhost:8090/test/getText?str=hello

接口返回的数据为：

[

    {

      "value": "我是接口返回的数据，接收的参数：hello"

    }

]

操作步骤如下：

1. 发送总线事件：

在Tab列表组件的【交互】-【点击标签项时触发】的脚本编辑框中添加如下代码

// 强烈推荐用法