scorll-header

整个preHeader实现,核心是滚动区域。先看整体分为左右div以及中间的preHeader

组件通信：（其中headerList为标题列表数组[ [{},{},{},…] ,title为当前标题 [ ‘’ ]）
:headerList=‘headerList’ :title=‘currentModel’ @change=‘shouldSave’

以下是圈住的是preHeader表面区段，其中slot是要考虑到父组件没将title传来时不去加载div

以下是控制滚动区域出现的核心部分
其中,isOpen绑定的pickerShow是布尔值控制是否出现滚动部分，而方法changePickerShow正是将pickerShow值取反


在来看scorll-header组件**，

**值得注意的是上图蓝色区域对应下图class为的‘mask-draw-picker’的div，
事件一(this.$ emit触发父组件事件不传值)：点击该区域，scorll-header组件也要消失。怎么办呢？点击该区域通过this,$emit触发scorll-header组件的maskTap事件
事件二(this. $emit触发父组件事件传值)：点击每一滚动项，通过this. $emit(‘change’,value)触发scorll-header组件@change绑定的事件，并且在该事件可以拿到value；拿到value后，再次通过this. $emit(‘change’,value)触发index.vue父组件@change绑定的事件，并且在该事件再次拿到value。

接下来看组件通信中scorll-header组件中的使用

index.vue ->preHeader ->scroll-header

先看看preHeader中接收到值的处理

再看index.vue中接收到值的处理（shouldSave是@change绑定的事件，currentModel是当前展示的区段）


而currentModel，又是通过watch去监听，当其发生变动时去调用加载当前区段数据的方法