PageNow中可以通过【自定义组件】组件来实现运行时组件编辑，自定义组件基于Vue的单文件组件语法进行组件构建，对单文件组件不了解的可以前往Vue官网文档 (opens new window)进行了解学习。

如何使用？

自定义组件在PageNow以功能组件的方式使用，在组件库中将自定义组件拖入画布即可进行组件代码的编辑工作，如下图：

拖入画布之后，点击组件，即可在组件配置表单中进行自定义组件的模板、脚本、样式的编辑工作

提示

自定义组件中无法使用import或require引入第三方外部插件库，也不支持嵌套使用自定义组件的功能

可用类库

PageNow内置了一些第三方类库环境，自定义组件中可以使用这些内置类库来实现组件的大部分功能，这些类库包括如下：

• lodash 4.17.15: 高性能的JavaScript实用工具库，在自定义组件脚本中，以下划线_来使用
• jquery 3.4.1: JavaScript工具库，在自定义组件脚本中，以美元符号$来使用
• iview-design 4.x: 基于Vue的高质量UI组件库
• axios 0.19.0: 一个基于promise的网络请求库，在PageNow中已把axios进行封装，推荐使用PnApi来进行网络请求
• Echarts 5.x: 基于JavaScript的开源可视化图表库，在自定义组件脚本中，以Echarts来作为echarts的全局变量

如何获取其它组件的VM实例

在自定义组件的脚本中，可以通过 this.findCompVmById('') 语法来获取当前画布中的其他组件的VN实例，注意，此函数的唯一参数为功能组件的ID而不是布局块ID， 功能组件ID应该为如下图所示：

如何发起网络请求

在自定义组件脚本中，可以通过平台封装的PnApi工具类来实现网络请求，当然，如果需要，也可以直接使用axios进行网络请求。

自定义组件如何与其他组件实现数据交互

由于自定义组件的所有功能均使用自定义脚本实现，没有像其他组件一样可以通过配置话的方式去和其他组件进行数据交互，因此要实现组件交互，也只能通过脚本化的方式实现， 推荐使用EventBus，具体使用方式请查阅事件总线章节

编辑好的组件功能如何保存复用

目前自定义组件还未实现组件代码的可复用管理功能，当我们编辑好一个自定义组件之后，如果想要复用，可以使用组件收藏功能来达到复用的效果。