[Vue.js] props, $emit, $event, v-model, watch

props : 부모의 데이터를 자식 component에서 사용할 때

- 부모 element 적용

<Modal :popInfo="popInfo" :products="products" :popup="popup" />

- 자식 component 적용(<script> 안쪽에 적용)

export default {
  name : 'Modal',
  props : {
    popInfo : Number,
    products : Array,
    popup : Boolean,
  }
}

 

$emit & $event : 자식 component에서 부모에게 데이터를 전달해 줄 때

- 자식 component 적용

<h4 @click="send">{{ product.title }}</h4>

export default {
  name : 'Card',
  methods : {
      send(){
        this.$emit('openModal', this.product.id)
      }
  },
}

methods의 함수에서 'this.product.id'가 $event에 해당됨.

 

- 부모 사용

<Modal @close="popup = false" />

 

v-model : input등의 입력에서 value를 받아옴.

- v-model.number = "" : 숫자로 바꿔준다.

 

watch : 데이터 감시

export default {
  name : 'Modal',
  data () {
    return {
      month : 1,
    }
  },
  watch : {
    month(a,b){
     if(a < 13){
       alert('warning!!');
     }
    }
  }
}

- 데이터 이름과 watch 안의 이름이 동일해야 한다.

- 첫번째 파라미터 : 변경값, 두번째 파라미터 : 변경 전 값