Question

<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
    },
   }

从父母那里重置计时器的最佳方法是什么？我想避免发出事件，因为这会导致重置计时器的所有使用。传递支柱的最佳选择，例如“开始”，“停止”，“重置”？

Answer 1

如果您希望将事件从父母传播到孩子，使用道具并观察它可能是处理此问题的好方法。一般而言，父母和子组件之间的数据通信应该使用道具进行父母与子女之间的沟通，并为子女之间的沟通发出事件。

当然，还有其他库可用于管理组件间通信，但上述内容通常适用于纯Vue.js代码。

Answer 2

是的，有一个很好的方法，而不是增加孩子的计时器使其在父数据中，并在父数据中增加它并使用道具将其传递给孩子，你可以在你喜欢的时候在父母中重置它;＆GT;您可以复制下面的代码并查看结果

子代码

  <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重置计时器

2 个答案: