VUE JS 소품 타이머를 재설정

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

예 자녀의 타이머를 늘리는 대신 부모 데이터에서 타이머를 늘리고 부모에서 증가시키고 소품을 자녀에게 전달하는 좋은 방법이 있습니다. 원하는 때에 부모에게 재설정 할 수 있습니다. >> 당신은 아래의 코드를 복사하고 결과를

아이 코드를 볼 수 있습니다

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