最近项目做完了，抽出一些时间做一些总结，主要是针对于可复用组件的解耦和样式复用。
一.数据从父组件传入
为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去,下面是在一些较复杂的场景中，对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))拷贝应注意以下几点:
- 如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；
- 如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；
- 如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
- 如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
- JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor
- 如果对象中存在循环引用的情况也无法正确实现深拷贝；
二.在父组件处理事件
比如某些子组件的click事件，避免高耦合，逻辑最好放在父组件中，子组件只是一个承载体。
// 子组件 proflist
changeSort( sortObj ) {
this.$emit('sortChange', sortObj )
}
// 父组件
<proflist @hanldSortChange='sortChange'></proflist>
这样既降低耦合，保证子组件中数据和逻辑不会混乱。
三.slot的应用
现在有一个需求，在同一个子组件中，我在不同的场景需要用到不同的按钮，那么在封装组件的时候就不用去写按钮，只用在合适的未知留一个slot，把按钮的位置留出来，然后再父组件中写入：
// 子组件
<div class = 'public_btn'>
<slot name = 'button'></slot>
</div>
// 父组件
<child>
<button slot = 'button'>按钮1</button>
</child>
这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。
四.统一管理各个组件公共样式
这里以less为例：
var.less里面可以装所有的公共样式:
然后各个子页面引进来就可以用，可以方便的做到样式统一和日后样式全局维护。涉及的变量，继承，嵌套，混合，可以在我的第一篇简书（整理之后的less知识点梳理）查看。
