【uniapp】使用Vant组件中的CountDown 倒计时设置use-slot属性自定义样式时显示不出来的问题

使用CountDown基础组件、自定义格式、毫秒级渲染均为出现问题，但是使用自定义样式加入了use-slot属性后，就出现了显示为空的问题。

Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://vant-contrib.gitee.io/vant-weapp/#/count-down%23zi-ding-yi-yang-shi官方给的代码如下 ：

<van-count-down use-slot time="{{ time }}" bind:change="onChange">
  <text class="item">{{ timeData.hours }}</text>
  <text class="item">{{ timeData.minutes }}</text>
  <text class="item">{{ timeData.seconds }}</text>
</van-count-down>

使用vue语法稍微改一下：

<van-count-down use-slot :time="time" @change="onChange">
			
					<text class="item">{{timeData.hours}}</text>
					<text class="item">{{timeData.minutes}}</text>
					<text class="item">{{timeData.seconds}}</text>
			
</van-count-down>

不知道是何种原因，一直显示空白：官方这里也给了 use-slot的默认值是false，只有开启use-slot绑定的change才能生效。

 组件源码也显示：子传父 ，使用$emit定义的函数名为change，传递参数为timeData

所以当我们这个bind:change="onChange" 我们使用 @change="onChange"也是绑定了这个change并触发onChange方法，也是没有任何问题的。实在找不到问题出在哪里，只能改一改：

<template>
<van-count-down :use-slot="true" :time="time" @change="onChange">
			<template>
				<solt>
					<text class="item">{{timeData.hours}}</text>
					<text class="item">{{timeData.minutes}}</text>
					<text class="item">{{timeData.seconds}}</text>
				</solt>
			</template>
	</van-count-down>
</template>


<script>
export default {
		data() {
			return {
				time: 30 * 60 * 60 * 1000,
				timeData: {}
			}
		},
		methods: {
			onChange(e) {
				// console.log("---");
				// console.log(e);
				//console.log(this.timeData);
				//console.log(this.timeData.hours);

                this.timeData = e.detail
			}
}
</script>

<style>

.item {
			display: inline-block;
			width: 22px;
			margin-right: 5px;
			color: #fff;
			font-size: 12px;
			text-align: center;
			background-color: #1989fa;
			border-radius: 2px;
		}
</style>

刷新了一下就出来了，只能说很奇怪，或许是我卡了，记录于2022/10/11   凌晨 0:52