组件基本介绍

黄健大约 5 分钟开发手册

在【src/template】目录下存放有对应不同组件类型及组件配置表单的模板文件，这些文件如下所示：

Template.vue：普通功能组件的主文件模板
TemplateForm.vue：普通功能组件的配置表单文件模板
ChartTemplate.vue：Echarts图表组件的主文件模板
Chart3DTemplate.vue：Echarts3D图表组件的主文件模板
ChartTemplateForm.vue：Echarts图表组件的配置表单文件模板

当我们使用一键生成组件文件服务时，系统会根据所选择的组件类别，来使用对应的模板生成组件的主文件和配置表单文件，当然，您不使用一键生成功能，也可以直接通过拷贝这些模板的内容来手动创建组件相关文件。

组件名称name

不论是组件的主文件还是配置表单文件，都有一个name属性来配置组件的名称，这是必须的，如下代码所示：

const _this = {
  name: 'ComponentName', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin],
  ...
}

这个name的配置，必须与组件的文件名保持一致，否则组件将无法被正常解析使用，当我们使用一键生成时，会自动以组件文件名填充至此字段中，如果您是手动创建组件文件，那么按照如上要求，配置组件的name属性即可。

组件版本version

组件的主文件中可以为其定义一个版本号，如下所示：

const _this = {
  name: 'ComponentName', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin],
  attr: {
    version: '1.0', // 组件版本号
    ...
  }
}

这个版本号在我们更新组件的配置属性时，可以通过修改递增此版本号，在平台设计器内的【升级组件】功能按钮中会根据页面中是否使用有该组件，然后判断组件的版本号与变更之后的版本号进行比较，如果不一样，则会提示更新升级组件，总之，我们每次更新组件的配置属性，最好都为其更新一个新的版本号version，且此版本号最好是向上递增。

组件的配置属性与data的区别和使用

正常情况下，每一个组件都应该有配置属性，除非这个组件不需要在使用中进行任何自定义配置，例如某个组件就是为了显示一段固定的文本或者图形或者别的效果，那就可以不需要配置属性，但大多数情况下，开发一个新的组件，都是希望组件能够进行多样化的个性配置，以满足不同的场景需求。

组件的配置属性以configDataTemp为键值的对象的形式定义在组件的attr属性下（attr是PageNow为组件特别添加的，并不是Vue自身的语法糖），例如下所示代码：

const _this = {
  name: 'ClockComp',
  mixins: [FuncCompMixin],
  attr: {
    version: '1.0',
    configDataTemp: {
      fontSize: 24,
      color: '#ffffff',
      showDate: true,
      showTime: true,
      showWeek: false
    }
  },
  data() {
    return {}
  },
  ...
}

目前我们只需要知道，我们定义的这些配置属性，是可以在组件的功能和样式中使用的，同时这些配置属性也可以在组件的配置表单中通过给其对应的输入组件来实现配置化。

而组件的data，在PageNow中，我们并没有对Vue自身的语法做任何的修改，data的功能与作用还是不变，一些不需要进行配置化的相关变量，我们仍然可以定义在data中。

组件的初始化函数init

每一个组件都具备一个init函数，默认在生命周期mounted中对组件进行数据源的初始化以及其他一些功能的初始化，此函数名不可修改且不可删除（99%的情况下都不需要删除，特殊情况目前还未遇到），否则会造成组件在使用过程中无法正常运行

init () { // 组价初始化函数，函数名必须使用init，不可更改
  this.initDatasource(() => {
    this.runCustomGlobalJsCode()
  }, (result) => {
    this.component.compConfigData.ds_resultObj = result.data;
    this.runCustomGlobalJsCode()
  });
  // 这里您可以添加组件在运行过程中需要的一些其他的初始化相关的逻辑代码
}

init函数中调用了mixins -> FuncCompMixin中的initDatasource函数，用于加载组件的相关数据源结果集，initDatasource函数接收两个函数参数，当组件未使用任何动态数据源（API接口、数据库、WebSocket等）时，执行的是第一个函数参数内的代码逻辑，也就是加载的是静态数据源结果集，但如果组件使用了动态数据源，执行的就是第二个函数参数内的代码逻辑，由于动态数据源一般是异步调用获取的数据源结果集，因此会执行如下代码来对ds_resultObj来进行二次赋值：

this.component.compConfigData.ds_resultObj = result.data;

大部分情况下，init函数默认的代码都不需要修改或删除，但也是可以添加您的组件中需要的一些初始化逻辑代码，后续章节中会对init函数中的其他一些语法和注意事项做更细致的说明讲解。