[JavaScript知识库]vue中如何编写可复用的组件？

组件，是一个具有一定功能，且不同组件间功能相对独立的模块。高内聚、低耦合。
开发可复用性的组件应遵循以下原则：
1）规范化命名：组件的命名应该跟业务无关，而是依据组件的功能命名。
2）数据扁平化：定义组件接口时，尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个
简单类型的数据。这样做有下列几点好处：
(1) 组件接口清晰。
(2) props 校验方便。
(3) 当服务端返回的对象中的 key 名称与组件接口不一样时，不需要重新构造一个对象。
扁平化的 props 能让我们更直观地理解组件的接口。

// 反例
<card :item="{ title: item.name, description: item.desc, poster: item.img }> </card>

<card 
	:title="item.name" 
	:description="item.desc" 
	:poster="item.img"> 
</card>

3）可复用组件只实现 UI 相关的功能，即展示、交互、动画，如何获取数据跟它无关，因此不要在组件
内部去获取数据。
4）可复用组件应尽量减少对外部条件的依赖，所有与 vuex 相关的操作都不应在可复用组件中出现。
5）组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。
6）组件应具有一定的容错性。
7）组件应当避免对其父组件的依赖，不要通过 this.parent 来操作父组件的示例。父组件也不要通过
this.children 来引用子组件的示例，而是通过子组件的接口与之交互。
8）可复用组件除了定义一个清晰的公开接口外，还需要有命名空间。命名空间可以避免与浏览器保留标
签和其他组件的冲突。特别是当项目引用外部 UI 组件或组件迁移到其他项目时，命名空间可以避免很多
命名冲突的问题。