javascript - vue js Prop 重置计时器

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

从 parent 这里重置计时器的最佳方法是什么？ 我想避免发出事件，因为这会导致计时器的所有使用都被重置。传递 Prop 的最佳选择是“开始”“停止”“重置”吗？

Answer 1

如果您希望将事件从父级传播到子级，使用 Prop 并观察它可能是处理此问题的好方法。一般来说，父子组件之间的数据通信应该通过 props 进行父子通信，并通过发射事件进行子父通信。

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