uni-app中picker-view(常见的坑)出现选择值与输出的值不一致

今天遇见一个问题，在使用picker-view的时候；
出现我选择的值和输出的值不一致；
经过与官方的demo做对比发现；

官方是实时的将值从组件中向上抛出去；
值是从change事件传递出去的

而我为了减少实时的想父组件传递值；
我将这个值存起来了的；
在用户点击确认的时候；
我才向上将值抛出去；

结果发现了一个问题
这个问题就是在我快速选择的时候；
我选择的值和输出的值不一致

因为当我快速选择的时候，造成异步；
如何解决：
使用change事件实时的将值抛出去

组件

下面的代码我使用了uni-popup这个弹框组件，这个组件是非常强大的哈；

有时间可以研究一下这个组件

<template>
<view>
<uni-popup ref="onlyhover" type="bottom" :maskClick=true>
<view class="date-select">
	<view class="demo-flex">
		<view class="select-time">
			选择时长
		</view>
		<view class="of-sourceof" @click="closemask">
			确认
		</view>
	</view>
	<picker-view class="picker-view"
	:value="defaultValue"
	@pickstart="pickstart"
	@change="bindChange">
		<picker-view-column>
			<view class="item" v-for="(item,index) in hoverhover" :key="index">{{item}}小时</view>
		</picker-view-column>
	</picker-view>
</view>
</uni-popup>
</view>
</template>

<script>
export default {
data() {
return {
	selectscooldata:{},
	title: 'picker-view',
	hoverhover:[0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8],
	defaultValue:[2],//默认选中hoverhover中下标为2的那个元素
        //defaultValue是默认展示的值，你要注意，如果hoverhover是动态循环出来时，你在data中直接给默认值，可能不能够显示你想要展示的值
}
},

methods: {
pickstart(){
	console.log(1)
},

/**
 * uniapp中，向上传递值得时候，不要在关闭事件中进行传递值；
 * 因为关闭事件中有可能形成异步(造成选择的值和页面显示的值不一致这个问题)
 * 使用change事件将值抛出去
 * */
bindChange(e) {
	console.log('gundong',e)
	this.selectscooldata=e;
	if(e.detail&&e.detail.value ){
                //实时将用户选择的值抛出去
		this.$emit('changeCont',this.hoverhover[e.detail.value[0]] )
	}else{
		// 用户没有滚动，说明用户选择的是我们给用户展示的默认值
	}
},
date(e) {
	this.$refs.onlyhover.open();

},

fatheropen(){
	this.$refs.onlyhover.open();
},

fathClose(){
	this.$refs.onlyhover.close();
},

/**
 * 确认按钮，没有值得时候去寻找默认值
 * */
closemask(){
	if(this.selectscooldata.detail&&this.selectscooldata.detail.value ){
            //
	}else{
                //此时用户选择的是默认值，在点击的时候抛出去
		let cont=this.hoverhover[this.defaultValue[0]];
		this.$emit('changeCont',cont )
	}

}
}
}
</script>

<style scoped lang="scss">

.date-select {
width: 100%;
height: 500rpx;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
background-color: #FFFFFF;
position: relative;
.picker-view {
background-color: #EEEEEE;
position: absolute;
width: 100%;
height: 388rpx;
bottom: 20rpx;
.item {
	height: 88rpx;
	line-height: 68rpx;
	font-size: 32rpx;
	text-align: center;
}
}
.btn{
	width: 100%;
	height: 100rpx;
	box-sizing: border-box;

	.btn-left,.btn-right{
		color: #FFFFFF;
		width: 150upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 15upx;
	}

}
}

.demo-flex{
display: flex;
align-items: center;
.select-time{
height:96rpx;
line-height: 96rpx;
font-size: 32rpx;
font-family: "PingFangSC, PingFangSC-Medium";
font-weight: 500;
text-align: center;
color: #323233;
flex: 1;
padding-left: 90rpx;

}
.of-sourceof{

height:96rpx;
line-height: 96rpx;
font-size: 30rpx;
font-family: "PingFangSC, PingFangSC-Regular";
text-align: center;
color: #3388ff;
padding-right: 32rpx;
}
}
</style>