参考资料

通用组件设计原则

组件的设计原则

前端组件设计原则

思考总结

1、组件设计的目的

提高业务的开发效率，提高项目的可维护性。

2、组件设计的职能划分

组件可以设计成很多种类型的组件，如容器组件、业务组件、通用组件。

组件的职能划分是为了代码的复用以及项目的维护。

2.1、容器组件

举例

//多页面中，一个页面的展示。
{ path: '/sys/menu', component: () => import('@/views/sys/menu/index.vue') },

特点

1、不接受props。
2、一整个业务的集合。
3、内聚很多业务组件、通用组件
4、充当数据源

设计原则

页面级组件

2.2、业务组件

开发者最容易写出来的组件就是业务组件，为业务服务的组件。

2.3、通用组件

举例

<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    :row-key="rowKey"
    border
  >
    <el-table-column v-for="(item) of tableColumn" :prop="item.value" :label="item.label" />
    <slot></slot>
  </el-table>
</template>

<script lang="ts" setup>
interface Item {
    value:string,
    label:string,
}
defineProps<{
    tableColumn: Array<Item>;
    tableData: Array<any>;
    rowKey:string;
}>();

</script>

特点

1、单一职责，只负责一件事情
2、通信通过slot、event、prop完成
3、复用性极强
4、内部的逻辑代码尽可能简单

设计原则

1、先参考部门的设计规范
2、暴露slot，放弃部分dom结构的控制，但如果组件需要dom结构展示，则需要有默认值。
3、单一职责，不可过度碎片化，要建立在可复用的基础上。
4、props尽可能扁平化以及默认化。