自定义组件开发

灵蹊提供了自定义组件的能力用来扩展灵蹊产品本身能力，自定义组件能实现跨页面的组件粒度的复用，做到只写一次，到处复用的效果。
组件开发本身可以直接让前端开发者基于vue来开发（目前版本对vue单文件有限制支持）

1、模块入口（如图1）

2、灵蹊自定义组件组成部分

1）组件名称：用来显示组件
2）组件描述
3）组件插槽代码：在组件未渲染时占位用
4）源码（vue单文件组件代码，template、script、style）

3、灵蹊组件开发标准

1）代码格式，vue单文件格式（如图1）

代码说明：

1.template部分和vue单文件组件中template使用方式完全一致，不做任何限制

2.script部分和vue单文件组件中组件开发规范完全一致，但内部代码为了兼容性建议使用ES5规范（目前灵蹊暂时不对源码做向下构建，后期会加）

3.css部分目前只支持原生css，暂时不支持预处理（后期会加）

4、开发实践

1）如何由外部传入变量（即vue组件props如何设置）？

通过定义组件props来定义

props中定义两个变量fontSize和color，在这两个属性中都存在一个desc的属性（最好添加，用来对外描述输入变量，如下图所示）

设置了props后，业务人员可以通过设置打开属性传递参数来改变组件样式或者行为

2）如何跨组件通信

如果页面中存在两个组件（A和B），B变化时需要通知A，那么组件A中声明props:global，在B组件中直接通过window.$global.xxx改变数据状态，A组件中this.global.xxx能同步变化。

3）如何访问组件挂载的Dom对象

在script部分，可直接通过root变量访问vue实例的挂载对象

4）开发方式
建议vscode中调试组件代码，然后组件代码直接copy到灵蹊自定义组件位置即可

5）demo代码（点击打开demo代码）