如何描述清楚一个组件

如何能快速的了解组件

分为四个部分功能说明、使用说明、组件关系、核心逻辑

如下：

1. 功能说明
   支持对人员的单选或多选，返回一个人员列表数组；
   支持设置默认值、修改已选数据
2. 使用说明

	@param   {String/Number} [title]  标题内容
	@param   {Boolean} [isSingle]  是否是单选
	@param   {Array} [afferentData] 传入的已选数据
	@param   {Function}  [peopelGroupBack] 回调函数
	提供的外部调用的方法
	this.$refs.personnelSelection.open()	// 打开组件
	this.$refs.personnelSelection.close()	// 关闭组件
	this.$refs.personnelSelection.editCachePickData(data) // 修改已选中的数据，data为修改后的数据
	eg：<personnelSelection 
					:isSingle="false"  
					:afferentData="afferentData"     
					title="加签人"  
					ref="personnelSelection"
					@peopelGroupBack="peopelGroupBack"></personnelSelection>

3. 组件关系
4. 核心逻辑
   4.1 主体思路
   4.1.1 personnelSelection中getDefaultData方法获取当前人所在的部门人员信息，数据返回后加工处理赋值给peopleList，并把数据赋值给cacheDefaultData进行缓存，ulSelected获得后进行展示
   4.1.2 Dsearch进行搜索触发personnelSelection中searchFun方法在全公司进行搜索，返回10条数据，数据返回后加工处理赋值给peopleList，ulSelected获得后进行展示
   4.1.3 点击人员列表，触发ulSelected中listFun方法，通过dataComparison方法进行数据比对，返回已选的人员数组pickData到personnelSelection
   4.2 主要组件
   ulSelected的主要功能是展示列表、返回已勾选的数据
   4.2.1 父组件把人员列表data和已选的人员数据pickData传递到ulSelected组件中，在ulSelected组件中进行数据对比，当执行点击操作后，进行数据对比，在把数据返回到父组件中
   4.2.2 核心代码

   ulSelected的参数和主要方法
     @param   {Boolean} [isSingle]  是否是单选类型
     @param   {Array} [data]  展示的人员数据
     @param   {Array}   [pickData]  已选的人员数据
     @param   {Function}   [peopelCallBack]  选中后的回调函数，参数是已选中的数据
   
       /**
        * 点击某条数据，触发的数据操作，判断是在选中列表中写入还是删除
        * @param {Object} [item] 某条被点击的数据
        */
       listFun(item) {
           let pickData = this.pickData.slice()
           let obj = this.dataComparison(item)
           if(obj.state){
               pickData.splice(obj.index, 1)
           }else {
               if(this.isSingle){
                   pickData = [item]
               }else{
                   pickData.push(item)
               }
           }
           this.$emit('peopelCallBack', pickData)
       },
       /**
        * 数据对比，对比当前数据是否在已选择的数据列表中，返回一个对象，是否存在，存在角标号码
        * @param {Object} [item] 当前要对比的数据
        */
       dataComparison(item) {
           let returnData = {state:false}
           let pickData = this.pickData.slice()
           pickData.forEach((ele, index) => {
               if(ele.onlyId === item.onlyId){
                   returnData = {
                       state:true,
                       index: index
                   }
               }
           });
           return returnData
       }