网站建设培训证书,软件工程师行业分析,wordpress查看购物车不管用,网站制作怎么办工作中遇到了一个时间正计时的功能。 另外涉及到有Vue父组件调用子组件中的data和method,作为记录。 下面贴代码~
HTML部分
templatediv classtimerdiv refstartTimer00:00:00/div/div
/templateJS…工作中遇到了一个时间正计时的功能。 另外涉及到有Vue父组件调用子组件中的data和method,作为记录。 下面贴代码~
HTML部分
templatediv classtimerdiv refstartTimer00:00:00/div/div
/templateJS部分 script
export default {name:Timer,props:{time:{type:Number}},data() {return {timer: ,hour: 0,minutes: 0,seconds: 0,cr: }},created() {this.timer setInterval(this.startTimer, 1000);},methods: {startTimer() {this.seconds 1;if (this.seconds 60) {this.seconds 0;this.minutes this.minutes 1;}if (this.minutes 60) {this.minutes 0;this.hour this.hour 1;}this.$refs.startTimer.innerHTML (this.hour 10 ? 0 this.hour: this.hour) : (this.minutes 10 ? 0 this.minutes: this.minutes) : (this.seconds 10 ? 0 this.seconds: this.seconds);this.cr this.seconds},stop () {clearInterval(this.timer)},start () {this.timer setInterval(this.startTimer, 1000)}}
}
/script这里通过props把父组件的方法传递给子组件
这里我们在子组件中定义
Time :timetime refheaderChild/Time我要调用父组件中的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
