代码实现新增自定义组件 # 用代码方式新增一个自定义组件的方法 ## 第一步：显示在拖动候选栏里 首先打开 `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` 组件里也要修改一下传值   点击预览就可以看到效果了 