数据驱动子组件显隐

一般情况下，对子组件的显隐操作都使用自定义事件来进行一对一事件控制，这种方式方便快捷，不需要写代码。

如果要单独显示某个子组件，则需要把其他不需要显示的组件全部隐藏。当需要显隐控制的子组件比较多时，需要配置的事件与动作会迅速膨胀。

事件驱动下，显隐都需要全额配置

随着控制的入口增多、需要操作的子组件增多，配置起来也会越来越复杂，一旦中途新增了子组件，所有的控制入口全都要对新增的子组件做对应动作配置。

数据驱动则利用了子组件数据为空的情况下不渲染的特性（部分子组件数据不影响其功能，这部分无法使用数据驱动）来进行的，通过回调参数与数据过滤器的联合，使得需要显示的子组件返回有效数据实现显示，需要隐藏的子组件返回空数据来实现隐藏。

数据驱动显隐的优点

1. 可跨屏交互
2. 需要进行的配置更少
3. 新增内容对原先的入口影响小
4. 问题排查便捷

数据驱动显隐的缺点

1. 需要基本的代码能力

相同类型显隐控制

功能说明

点击控制入口，分别实现单独显示圆形、矩形、三角形，全部显示、全部隐藏、显示圆形与三角形的功能。

效果演示

实现思路

相同类型的组件，并且配置项中包含了多系列的配置，可以通过在数据中动态过滤对应的数据系列实现，尽量减少子组件的数量。

具体逻辑

子组件中通过系列区分内容，并在数据中留好标记。

在控制的入口处的静态数据留下需要显示的内容标记。

通过回调参数将相应的内容传出。

子组件中通过回调参数与数据过滤器动态过滤出对应的数据内容。

不同类型显隐控制

功能说明

点击控制入口，分别实现单独显示信息面板、柱状图、散点、飞线，全部显示、全部隐藏、信息面板与柱状图、飞线与散点的功能。

效果演示

实现思路

在子组件的数据增加额外字段做标记，结合通过回调参数传入的显示标记，在数据过滤器中做数据过滤实现子组件的显隐控制。

具体逻辑

在数据中增加额外字段作为标记。

在控制的入口处的静态数据留下需要显示的内容标记。

通过回调参数将相应的内容传出。

子组件中通过回调参数与数据过滤器动态过滤出对应的数据内容。