Vue 正计时器组件

工作中遇到了一个时间正计时的功能。
另外涉及到有Vue父组件调用子组件中的data和method,作为记录。
下面贴代码~

HTML部分


JS部分



这里通过props把父组件的方法传递给子组件

这里我们在子组件中定义


我要调用父组件中的start()的方法以及参数,方法如下

this.$refs.headerChild.stop()
this.$refs.headerChild.seconds

注:子组件中统计时分秒总合

var timeHour = this.$refs.headerChild.hour
var timeMinutes = this.$refs.headerChild.minutes
var timeSeconds = this.$refs.headerChild.seconds
var totalTime = timeHour * 3600 + timeMinutes * 60 + timeSeconds

你可能感兴趣的:(vue.js,前端,javascript)