基于Vue的自定义数字滚动组件

基于Vue2.0的自定义数字滚动组件

参考文章

参考了基于Vue实现的数字滚动组件这篇文章，该文章代码可以直接拿来用没问题，但是我针对其父子组件传值的问题进行了修改，也做一下记录，并补充该文章的详细使用方法，方便初学者学习，建议搭配使用。

修改

其中子组件的代码可以直接复制使用，而针对子组件的使用方法如下：
（1）在components文件夹（规范是要将子组件放在当前模块的components文件夹下，如果初学者想自定义目录也可以）下，新建.vue文件，参考文章中是将文件重命名为CountIn.vue。
（2）在父组件页面中引用子组件

<script>
import CountTo from "./CountTo"
export default {
components: {
   CountTo
 }
}
</script>

这样就可以使用如下代码将子组件放置到自己需要的地方。

<count-in :startVal='0' :endVal='100.525' :speed='800' :decimals="3" :isReverse=false />

但！
需要注意的是，自定义组件的参数可以替换成变量。我这里是将endVal这个属性替换成了我需要的变量value，即:endVal='value'，这样会存在一个问题：若这个变量value也是父组件页面的父组件传递来的，可能会造成value的初始化值已经传递给了子组件后，才接收到父组件页面的父组件传递来的参数值（涉及vue2.0的生命周期的问题），为了避免这个问题，在子组件的使用中加入v-if，作用有两点，第一点就是当数据不为空时才传入，防止数据显示不出来的问题。第二点就是v-if有强制刷新的功能，避免数据传输不同步的问题。
代码修改如下：

<count-in v-if="value" :startVal='0' :endVal='value' :speed='20' :decimals="0" :isReverse=false />
<span v-else>0</span>

另外，若传递的数值太小，即startVal=0,endVal=1这种情况，滚动特效约等于没有，因为就只滚动了一次。数字越大、小数点越多滚动效果越好，同时也要记得调整speed参数到合适的范围，数字区间小speed就设置小一点，区间大就将值设置大一点。

有不足之处请指出，欢迎留言讨论~