Vue开发公共组件应注意哪些方面

Vue开发公共组件应注意哪些方面

一、理论上来说，既然是使用vue开发可共用的组件。首先需要开发者具备组件化的思想。公共组件开发的目的就是为了复用性，要保证复用性高就要求我们开发出来的组件应具备高内聚、低耦合的特性

二、实现上来说，我们应尽量做到以下几点：

1. 和业务有关的数据不要在公共组件中获取和处理，数据尽量从父组件传入

为了和业务与其他的组件解耦，子组件本身就不应该生成数据。即使生成了，也只能在组件内部运作，不能传递出去。
父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则

2.在父组件处理事件

在通用组件中，通常会需要有各种事件，比如输入框onChange事件，或者组件中某个按钮的 click 事件，这些事件的处理方法应当尽量放到父组件中，在子组件中去触发父组件的函数去处理，通用组件一般只是作为一个事件的中转。

3.公共组件中一般要留一个插槽slot

一个公共组件，一般不能够完全适用于所有应用场景，我们在封装组件的时候，往往只需要完成组件 80% 的功能，剩下的 20% 可以让父组件通过 solt 解决

4.不要依赖 Vuex

父子组件之间是通过 props 和 自定义事件 来传参，非父子组件可以使用Vuex 传参，但是 Vuex 的设计初衷是公共状态的管理，虽然可以用来传参，但并不推荐，因为Vuex 类似于一个全局变量，会一直占用内存，在写入数据庞大的 state 的时候，可能会产生内存泄露

6.兼容性问题

公共组件涉及到不同屏幕宽度的手机和不同的浏览器的展示，应该在适配性方面做一些样式和js的兼容

7.可定制性与可扩展性

公共组件应该根据不同的使用场景增加可定制性和可扩展性
样式方面：我们可以做一些默认的样式选择，如果不满足使用场景，最好能够让用户可以选择自定义，比如按钮组件的背景色，字体大小，边框样式。
功能方面：我们可以给使用组件的开发者尽可能多的配置功能的选项，而且应该留一些入口，便于使用者根据场景二次开发

注意：调用频繁的组件可以放在vue.prototype上，比如弹框组件可以挂载到vue.prototype上，然后再通过方法调用，就不用再引用该组件了