代码实现新增自定义组件 # 用代码方式新增一个自定义组件的方法 ## 第一步:显示在拖动候选栏里 首先打开 `src/components/componentsConfig.js` 文件,所有组件的基础配置都是在这个文件里写的。  在这个文件里新增一段固定格式的JSON,包含新组件的信息  `options` 里的属性根据组件的要求按需整改。 保存后打开页面就可以发现已经添加到 **基础字段** 里了  虽然可以拖动到设计器中,但是不会有任何显示,因为我们没有定义组件的实现  ## 第二步:编写组件实现 首先新建一个vue文件:`src/components/jeecg/JeecgInput.vue`,暂时先写上下图的这些代码  然后在 `src/components/WidgetFormItem.vue` 文件里引用一下  并且在页面里同步引用,加个 v-if 判断,只有当当前组件是 jeecg-input 的时候才显示  再回到页面上,就可以看到能正常显示出来了  但是点击预览仍然是显示不出来组件的,因为设计和预览用的是两个不同的组件  我们还需要打开 `src/components/GenerateFormItem.vue`,用通用的方式再引用一下刚刚新建的组件   ## 第三步:用户自定义组件属性 组件的属性可以在 `src/components/WidgetConfig.vue` 文件里整改,打开这个文件,新增以下代码  回到页面里就可以看到效果  现在我们给 `defaultValue` 和 `placeholder` 这两个属性开放给用户修改   效果如下:  还需要组件内部配合修改下,修改成下图这样  在 `src/components/WidgetFormItem.vue` 和 `src/components/GenerateFormItem.vue` 组件里也要修改一下传值   点击预览就可以看到效果了 