Vue.js组件通信Slots完成ElementUI风格表单项组件封装

用Slots封装Element UI表单项组件的核心是解耦标签、输入控件、校验提示三部分，通过label/default/error三个具名插槽实现父控内容行为、子控布局样式，支持v-model双向绑定与Element样式继承。

用 Slots 封装 Element UI 风格的表单项组件，核心是把“标签、输入控件、校验提示”三部分解耦，让父组件决定内容和行为，子组件专注布局与样式逻辑。

Slots 分层设计：label / default / error

一个干净的表单项组件（如 <form-item>）应预留三个具名插槽：

• label：放标签文字或带 icon 的复杂标签（如 <span><i class="el-icon-user"></i> 用户名</span>）
• default：放实际输入控件（<el-input>、<el-select> 等），支持 v-model 绑定
• error：放校验错误信息，可由父组件传入，也可由子组件通过 provide/inject 或 props 接收校验状态后动态渲染

支持 v-model 的双向绑定兼容

子组件需正确暴露 v-model 能力，不依赖内部具体控件类型：

• 定义 model 选项（Vue 2）或使用 v-model 语法糖 + update:modelValue（Vue 3）
• 在 default 插槽内，将父组件传入的控件自动绑定 v-model —— 实际靠 scoped slot（Vue 2）或 v-slot 透传 prop 实现
• 推荐方式：子组件不操作插槽内容，只包裹结构；由父组件自己写 <el-input v-model="form.name"></el-input>，保证响应式链完整

继承 Element UI 样式与交互逻辑

复用 el-form-item 的 CSS 类与 BEM 命名，降低样式冲突风险：

立即学习“前端免费学习笔记（深入）”；

• 根元素添加 el-form-item 类，并按需加 is-error、is-required
• 内部结构仿照 Element 源码：用 <label> 包 label 插槽，<div class="el-form-item__content"> 包 default 插槽，<div class="el-form-item__error"> 包 error 插槽
• 可选：监听父级 el-form 的 validate 状态（通过 inject 获取 form 实例），触发校验时主动更新 is-error 类

用法示例：父组件中简洁调用

封装后，业务代码变得清晰直观：

<form-item label="用户名">
  <template #label><span><i class="el-icon-user"></i> 用户名</span></template>
  <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
  <template #error>{{ errors.name }}</template>
</form-item>