Vue通用组件的封装

最近项目做完了，抽出一些时间做一些总结，主要是针对于可复用组件的解耦和样式复用。

一.数据从父组件传入

为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去,下面是在一些较复杂的场景中，对props传递的参数加一些验证，也是方便如果是数据类型不符合可以直接抛出异常。

props: {
 tableData: {
   type: Array,
   required: true // 必传
 },
 titleName: String,
 needNum: [String, Number], // 两个类型都可以传
 isEdit: {
  type: Boolean,
  default: false // 默认false
 }
}

props传入参数，不建议对它进行操作，如果要操作，请先在子组件深拷贝。如果你是用JSON.stringify, JSON.parse方法深拷贝需注意:

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象,
如果使用JSON.parse(JSON.stringify(obj))拷贝应注意以下几点:

1. 如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；
2. 如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；
3. 如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
4. 如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
5. JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor
6. 如果对象中存在循环引用的情况也无法正确实现深拷贝；

二.在父组件处理事件

比如某些子组件的click事件，避免高耦合，逻辑最好放在父组件中，子组件只是一个承载体。

// 子组件 proflist
changeSort( sortObj ) {
  this.$emit('sortChange', sortObj )
}

// 父组件

这样既降低耦合，保证子组件中数据和逻辑不会混乱。

三.slot的应用

现在有一个需求，在同一个子组件中，我在不同的场景需要用到不同的按钮，那么在封装组件的时候就不用去写按钮，只用在合适的未知留一个slot，把按钮的位置留出来，然后再父组件中写入：

// 子组件

  

// 父组件

  按钮1

这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。

四.统一管理各个组件公共样式

这里以less为例：

var.less里面可以装所有的公共样式:

然后各个子页面引进来就可以用，可以方便的做到样式统一和日后样式全局维护。涉及的变量，继承，嵌套，混合，可以在我的第一篇（整理之后的less知识点梳理）查看。