vue之组件封装

108 阅读1分钟

1、什么时候需要封装组件?

同一功能模块在项目中出现两次或两次以上,或者项目中存在多个表现形式一样的不同功能模块,则需要考虑是否进行封装。

2、封装原则:高内聚、低耦合、职责单一

(1)考虑数据传递

通过定义props用于接收父组件传递的数据,同时要注意维护单向数据流,即避免直接修改props,并且要注意数据不要依赖全局。

(2)避免在子组件中处理业务逻辑

组件中的操作针对不同业务将会有不同的处理逻辑,应避免直接在子组件中处理业务,而是通过$emit派发自定义事件,将数据传递给父组件,由父组件来处理。

(3)预留插槽slot

为适配同一功能的不同表现形式,需为组件预留好插槽。

(4)单一职责,能明确其意义

以【封装上传文件组件】为例,其大致思路如下

upload.png