[Vue 실전편]props의 데이터 변화 감지를 위한 watch 사용법

상황은 다음과 같습니다.

watch 속성을 사용하는데, props로 받아온 값의 변화를 감지하는 상황의 코드입니다.

부모 컴포넌트 

<template>
 <input type="checkbox" id="check" v-model="isOnlyShowTodayDeliveryOption"/>
 <label for="check">변경 감지</label>
 <자식 :isOnlyShowTodayDeliveryOption= "isOnlyShowTodayDeliveryOption" >
</template>
<script>
import 자식 from './자식'
export default : {
  components : {
  	자식,
  }
  data: function() {
    return {
      isOnlyShowTodayDeliveryOption: false
    }
  },
}
</script>

자식 컴포넌트

<template>
</template>

<script>
export default : {
  props: {
    isOnlyShowTodayDeliveryOption: Boolean,
  },
  watch: {
    'isOnlyShowTodayDeliveryOption': function() {
     alert('변경이 감지되었습니다.');
    },
  }
}
</script>

 

 

Vuex store의 값의 변화를 감지하는 watch

export default {
  watch : {
    
  }

}