input 박스 하위 컴포넌트로 데이터 연결 방법

App.vue 상위 컴포넌트

<template>

  <check-box v-model="checked">  </check-box>

</template>

 

<script>

exportd default {

  components:['CheckBox'],         

data(){

   return {            

        checked : false

       }

   }

}

</script>

 

 

 

 

CheckBox.vue 하위 컴포넌트

<template>

  <input type="checkbox" :value="value" @click="toggle">

</template>

 

<script>

exportd default {

  props:['value'],         // value로 값을 받고

methods:{

   toggle(){              //함수를 만들어서

        this.$emit('input', !this.value)     //input을 전달한다. !this.value 을 통해 토글값으로

       }

   }

}

</script>

 

 

v-model은 기본적으로

@input 이벤트  (전달)

:value 값  (받을때)

으로 조절이 된다