前端——组件库设计与开发实践

组件库是前端工程化的基础设施。本文将分享如何设计和开发高质量的前端组件库。

1 组件设计原则

// 组件设计基本原则/* 1. 单一职责原则 - 每个组件只负责一个功能 2. 开放封闭原则 - 对扩展开放，对修改封闭 3. 接口隔离原则 - 组件接口应该小而专一 4. 依赖倒置原则 - 依赖抽象而不是具体实现 */// 组件属性设计示例exportdefault{name:'Button',props:{type:{type:String,default:'primary',validator:value=>['primary','secondary','danger'].includes(value)},size:{type:String,default:'medium',validator:value=>['small','medium','large'].includes(value)},disabled:Boolean,loading:Boolean}}

2 组件事件系统

// 组件事件设计exportdefault{name:'DataTable',emits:{// 事件验证'row-click':(row)=>{returntypeofrow==='object'&&row.id!==undefined},'selection-change':(selection)=>{returnArray.isArray(selection)}},methods:{handleRowClick(row){// 触发自定义事件this.$emit('row-click',row)}}}

3 组件插槽设计

<template> <div class="card"> <!-- 默认插槽 --> <div class="card-header"> <slot name="header"> <h3>{{ title }}</h3> </slot> </div> <!-- 默认内容 --> <div class="card-body"> <slot></slot> </div> <!-- 操作区域 --> <div class="card-footer"> <slot name="footer"> <button @click="$emit('confirm')">确认</button> <button @click="$emit('cancel')">取消</button> </slot> </div> </div> </template> <script setup> defineProps({ title: String }) defineEmits(['confirm', 'cancel']) </script>