子组件开发

当某些组件不能独立运行需要运行在当前组件之上，并且希望动态的添加，额外的对接数据，这个时候就可以考虑用子组件的形式来开发。

子组件的开发基本与父组件的开发相同，主要是配置文件的名称和读取配置参数的不同。下面介绍一下，如何开发一个子组件。

1.添加配置文件

在 config 目录下新建一个名为subConfigs的子组件文件夹，subConfigs中的文件会被识别为子组件的数据和配置文件，在subConfigs下添加子组件对应的配置文件：xxx.json 和 xxx.data.json 。

注意：配置文件和数据文件需要同时存在，缺一不可。文件的命名没有什么要求，只要保持同名即可。

您也可以通过generate命令的--child选项来自动创建子组件，parent为父组件的名称。

easyv generate <parent> --child

2.定义配置文件内容

之前说过，子组件的配置与父组件基本相同，下面主要介绍一下一些不同之处。

首先看 child1.json 配置文件，

{
  "base": {
    "name": "副标题",
    "module_name": "sub-title",
    "version": "1.0.0",
    "show": 1
  },
  "configuration": [
    {
      "name": "fontSize",
      "displayName": "大小",
      "type": "number",
      "value": 12
    }
  ]
}

可以看到，base 与 configuration 的配置都是一样的，只不过子组件没有了 width 和 height 的配置，因为子组件是依附与父组件上的，所以子组件的宽高位置完全由父组件来决定，所以一般不需要添加宽高位置配置信息。当然如果你需要对子组件做宽高位置处理的，可以自己手动再configuration中加配置，配置可以添加到任意你想添加的位置，读取的时候在配置项的对应位置中读取即可。

注意：子组件的base中的module_name需要保证在当前父组件下唯一

再看一下 child1.data.json 的数据配置项

{
    "data": [
      {
        "text": "子组件副标题数据"
      }
    ],
    "fields": [
      {
        "name": "text",
        "value": "text",
        "desc": "文本"
      }
    ]
  }

跟父组件一模一样，这个就不过多介绍了。

3.关联配置

定义好了配置内容之后，那么怎么和父组件关联起来呢？

其实你完全可以不做任何关联，因为我们已经帮你自动关联上了。你可以查看一下页面视图，可以看到右侧的配置栏发生了变化，多了一栏子组件管理，在最右边有个 + 按钮，点击可以出现子组件的下拉列表。

你可以在入口文件中打印一下 childrenData 和 childrenConfig，并且在页面视图中添加一个组件（点击一下下拉列表的副标题），这个时候再来看控制台的打印日志。

这样就可以看到我们的配置信息了。

childrenData 和 childrenConfig 都是一个数组，顺序是添加子组件的列表顺序，并且配置和数据是一一对应的。

除此之外，你可能会想，我如果想要一开始就添加上指定的几个子组件，或者我定义好了几个子组件的配置，但我又不想删掉配置文件，只想在列表中展示我指定的几个子组件怎么办？

在父组件的配置文件中有两个相关的配置项 presetChildren 和 children

presetChildren: 这个表示需要预先添加的子组件，也就是添加父组件的时候需要同时添加的子组件。这个值是一个数组，数组的每一项是子组件定义的 module_name
children: 这个表示子组件的列表，值也是一个子组件的 module_name 的数组

export default{
  base: {
    name: "子组件开发-demo",
    module_name: "childComponents",
    version: "1.0.0",
    show: 1
  },
  width: 200,
  height: 70,
  configuration: [],
  presetChildren: ["sub-title"],  //预先添加的子组件
  children: ["sub-title"]         //子组件列表，presetChildren的值需要在这个数组中
}

{
  "base": {
    "name": "子组件开发-demo",
    "module_name": "childComponents",
    "version": "1.0.0",
    "show": 1
  },
  "width": 200,
  "height": 70,
  "configuration": [],
  "presetChildren": ["sub-title"],  
  "children": ["sub-title"]   
}

注意：当presetChildren中的值不在children中时，则不会默认添加。

如果你觉得对某个子组件来说，数据和配置信息分散在两个数组里不够直观或者使用不够方便，可以使用utils文件夹下的bindChildren方法对子组件字段进行绑定。

该方法包含两个参数：子组件配置、子组件数据，分别填props传入的原始childrenConfig和childrenData即可。

//...
import { bindChildren } from "./utils/bind-children";	//从utils引入bindChildren方法

export default function (props) {
  const { left, top, width, height, id, data, childrenConfig, childrenData } = props;
  const subComponents = bindChildren(childrenConfig, childrenData);	//绑定并赋值给一个新变量
  console.log('subComponents',subComponents);

  //...
}

该方法返回一个数组，每个数组元素为一个子组件信息，绑定了子组件的配置、数据与id字段。

4.使用配置

从props里 childrenConfig 和 childrenData 拿到配置和数据配置之后，剩下的就是组件的渲染逻辑了，每个组件根据自己的场景去实现即可。

下面以当前的demo为例，简单试下一个子组件的渲染逻辑。

...

return (<div className="__easyv-component" style={styles} id={id}>
  <img src={require("./assets/logo.png")} />
  <div className={css.title}>{data[0].text}</div>

  {childrenConfig.map((item, i) => {
    const { fontSize } = item.configuration;
    return (
      <div
        key={i}
        style={{
          fontSize: fontSize,
        }}
      >
        {childrenData[i].data[0].text}
      </div>
    )
  })}
</div>)

...

效果如图所示：

5.总结

至此，一个简单的子组件实现就完成了。当然，你可以实现自己非常复杂酷炫的子组件，这完全取决于你自己的需求，只要获取了配置项和数据，剩下的开发就跟平台没有什么关系了。子组件的开发大部分的逻辑跟父组件是一样的，父组件有的配置子组件基本都有，除了个别只跟子组件相关的，比如父组件上定义的children 和presetChildren，这个在子组件上是没有的，以及width 和 height也是没有的，其他的基本就与父组件相同了。

6.示例Demo下载

child-components.zip

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~