vue js props重置计时器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue js props重置计时器相关的知识，希望对你有一定的参考价值。
<template>
<span>{{time}}</span>
</template>
<script>
export default {
name: 'Timer',
data () {
return {
time: 0
}
},
mounted () {
setInterval(() => {
++this.time
}, 1000)
}
}
</script>
父母
<template>
<div class="tetris">
<timer></timer>
</div>
</template>
<script>
import Timer from './Timer'
export default {
name: 'Game',
components: {
Timer: Timer
},
}
从父母那里重置计时器的最佳方法是什么？我想避免发出事件，因为这会导致重置计时器的所有使用。传递支柱的最佳选择，例如“开始”，“停止”，“重置”？
答案
如果您希望将事件从父母传播到孩子，使用道具并观察它可能是一个很好的方法来处理这个问题。一般而言，父母和子组件之间的数据通信应该使用道具进行父母与子女之间的沟通，并为子女之间的沟通发出事件。
当然，还有其他库可用于管理组件间通信，但上述内容通常适用于纯Vue.js代码。
另一答案
是的，有一个很好的方法，而不是增加孩子的计时器使其在父数据中，并在父母中增加它并使用道具将其传递给孩子，你可以在你喜欢的时候在父母中重置它>>你可以复制下面的代码并查看结果
子代码
<template>
<span>{{timer}}</span>
</template>
<script>
export default {
name: 'Timer',
data () {
return {
}
},
props:{timer:Number},
mounted() {
}
}
</script>
父代码
<script>
import Timer from './Timer'
export default {
name: 'Game',
data(){
return {
timerInit:0
},
components: {
Timer: Timer
},
mounted(){
setInterval(()=>{
++this.timerInit ;
console.log(this.timerInit);
},1000)
},
methods:{
clickHandler(){
this.timerInit = 0 ;
console.log(this.timerInit);
}
}
}<template>
<div class="tetris">
<timer:timer="timerInit"/>
<button @click="clickHandler">reset</button>
</div>
</template>以上是关于vue js props重置计时器的主要内容，如果未能解决你的问题，请参考以下文章
组件更新时重置 Snackbar 上的 autoHideDuration 计时器