Vue.js 인프런 #6

props

 props: { 
    number: Number,
    },

// LottoGenerator컴포넌트가 LottoBall 컴포넌트를 사용하면 부모자식관계가 생기는데, 부모가 자식에게 데이터를 줄수 있다. 그 역할을 하는 것이 props
// 대신 props는 자식이 데이터를 변경할수 없다. readonly라고 생각하면 됨.

components:{ 
            LottoBall,
        },
//자식 component라는것을 등록시켜준다.

    showBalls() {
       	for (let i = 0; i < this.winNumbers.length - 1; i++){
             timeouts[i] = setTimeout(() => {
                  this.winBalls.push(this.winNumbers[i]);
                   }, (i + 1) * 1000);
               }
               timeouts[6] = setTimeout(() =>{
                  this.bonus = this.winNumbers[6];
                  this.redo = true;
                }, 7000);
                },

위와 같이 setTimeout()을 사용해주었을때에는
clearTimeout()을 사용하여서 멈춰주어야한다.

 1.  watch:{
     winBalls(value, oldVal) {
         if(value.length === 0){
             this.showBalls();
         }
     },
     bonus(value, oldVal) {
         if(value === null){
             this.showBalls();
         }
     },
  }

watch는 어떤값이 바꼈는지 안바꼈는지 감시하는 기능을 의미한다.
최대한 watch는 안쓰는것으로 하자!! 사용했을때에 버그가 나타날수있는 경우가 많기때문에!!
computed는 새로운 값을 리턴하고, watch는 새로운 동작을 수행한다

   props:{
            number: Number,
   },

props는 부모가 자식에게 값을 보내줄수있도록 하는것이다.
예를 들어 여기에서는 LottoGenerator->LottoBall로 값을 5라는 값을 보내게되는것이고,그값을 LottoBall.vue의 number라는값에서 받을수있다. props는 받았을때에 데이터를 바꿔서는 안된다는 제약조건이 있으며, 만약 바꾼 값을 보내고싶을때에는 데이터를 바꾸는 부모의 함수를 자식에게props로 전달하는 방법을 사용해야한다

• 두개이상의 컴포넌트를 처음으로 사용

• 스타일가이드에 나와있는 우선순위 규칙 B까지는 꼭 지켜야하며
  그나머지는 선택적 사항일거같다

• 모양은 비슷하나 조금씩 달라지는것들은 컴포넌트로 만들어주면 아주 효율적이다

• v-for문을 사용할때는 항상 v-bind:key 값을 등록해주어야한다.