elementui props

ElementUI Props 基本概念

ElementUI 是基于 Vue.js 的组件库，其组件的属性（Props）用于接收父组件传递的数据或配置。Props 是组件间通信的重要方式，遵循单向数据流原则。

常用 Props 类型与示例

1. 基础类型 Props

   • 字符串、数字、布尔值等基础类型可直接传递。

     <el-button type="primary" disabled>按钮</el-button>

2. 对象/数组类型 Props

   • 需通过 v-bind 动态绑定。

     <el-table :data="tableData"></el-table>

3. 自定义验证

   • 可在组件定义时通过 validator 函数验证 Props。

     props: {
     size: {
       type: String,
       validator: (value) => ['large', 'medium', 'small'].includes(value)
     }
     }

Props 传递与接收

1. 父组件传递 Props

   <el-input v-model="inputValue" :maxlength="10"></el-input>

2. 子组件定义 Props

   

   export default {
     props: {
       maxlength: {
         type: Number,
         default: 20
       }
     }
   }

动态 Props 与 .sync 修饰符

1. 动态更新 Props

   • 使用 .sync 实现双向绑定（Vue 2.x）。

     <el-dialog :visible.sync="dialogVisible"></el-dialog>

2. Vue 3 替代方案

   • Vue 3 中改用 v-model 或事件传递。

     <el-dialog v-model="dialogVisible"></el-dialog>

Props 的最佳实践

• 避免直接修改 Props
  子组件应通过触发事件通知父组件修改数据，而非直接修改 Props。

• 默认值与必填项
  通过 default 和 required 明确 Props 的约束条件。

  

  props: {
    title: {
      type: String,
      required: true,
      default: '默认标题'
    }
  }

• 类型检查
  使用 type 指定 Props 类型（如 String、Array、Function），避免运行时错误。

常见问题与解决方案

1. Props 未生效
   检查父组件传递的数据类型是否与子组件定义的 type 匹配，或是否遗漏 v-bind。

2. 响应式丢失
   对象/数组类型的 Props 需确保父组件数据是响应式的（如使用 Vue.set 更新数组）。

3. 命名规范
   Props 名建议使用小驼峰（如 showDialog），模板中可转换为短横线（show-dialog）。