Vue 爬坑之路（九）—— 用正确的姿式封装组件

迄今为止作的最大的 Vue 项目终于提交测试，每天加班的日子终于告一段落。。。

在开发过程当中，结合 Vue 组件化的特性，开发通用组件是很基础且重要的工做

通用组件必须具有高性能、低耦合的特性

为了知足这些特性，开发的时候有不少须要注意的地方，这里我和你们分享一下个人心得

 

 

1、数据从父组件传入

为了解耦，子组件自己就不能生成数据。即便生成了，也只能在组件内部运做，不能传递出去。

父对子传参，就须要用到 props，一般的 props 是这样的：

 

可是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则

 

对于经过 props 传入的参数，不建议对其进行操做，由于会同时修改父组件里面的数据

// vue2.5已经针对 props 作出优化，这个问题已经不存在了

若是必定须要有这样的操做，能够这么写：

为何不直接写 let myData = this.data 呢？

由于直接赋值，并不能解除双向绑定。改变 myData 的时候，会改变 this.data，父组件的 data 也会变

而经过 JSON 转换以后，就能任性的操做了

 

 

2、在父组件处理事件

在通用组件中，一般会须要有各类事件，

好比复选框的 change 事件，或者组件中某个按钮的 click 事件

这些事件的处理方法应当尽可能放到父组件中，通用组件自己只做为一个中转

这样既下降了耦合性，也保证了通用组件中的数据不被污染

关于 $emit 的具体写法，能够参考《 Vue 爬坑之路（二）—— 组件之间的数据传递》

不过，并非全部的事件都放到父组件处理

好比组件内部的一些交互行为，或者处理的数据只在组件内部传递，这时候就不须要用 $emit 了

 

 

3、记得留一个 slot

一个通用组件，每每不可以完美的适应全部应用场景

因此在封装组件的时候，只须要完成组件 80% 的功能，剩下的 20% 让父组件经过 solt 解决

关于 slot 的具体用法，能够参考个人博客 《 Vue 爬坑之路（五）—— 组件进阶 》

 

上面是一个通用组件，在某些场景中，右侧的按钮是 “处理” 和 “委托”。在另外的场景中，按钮须要换成 “查看” 或者 “删除”

在封装组件的时候，就不用写按钮，只须要在合适的位置留一个 slot，将按钮的位置留出来，而后在父组件写入按钮

 

开发通用组件的时候，只要不是独立性很高的组件，建议都留一个 slot，即便还没想好用来干什么

 

 

4、不要依赖 Vuex

《 Vue 爬坑之路（四）—— 与 Vuex 的第一次接触》

父子组件之间是经过 props 和 自定义事件 来传参，非父子组件一般会采用 Vuex 传参

可是 Vuex 的设计初衷是用来管理组件状态，虽然能够用来传参，但并不推荐

由于 Vuex 相似于一个全局变量，会一直占用内存

在写入数据庞大的 state 的时候，就会产生内存泄露

 

当页面刷新的时候，Vuex 会初始化，同时也会丢失编辑过的数据

若是刷新页面时须要保留数据，能够经过 url 或者 sessionstorage 保存 id，而后 ajax 请求数据

 

 

5、合理运用 scoped 编写 CSS

在编写组件的时候，能够在 <style> 标签中添加 scoped，让标签中的样式只对当前组件生效

可是一味的使用 scoped，确定会产生大量的重复代码

因此在开发的时候，应该避免在组件中写样式

当全局样式写好以后，再针对每一个组件，经过 scoped 属性添加组件样式