vue component v-model 만드는법

vue component v-model 만드는법

vue 에서 v-model 을 custom component 에서 사용 하는 방법을 알아보겠습니다.

먼저 

<template> <div class="wrapper"> <date-picker v-model="date"></date-picker> <p> Month: {{date.month}} Year: {{date.year}} </p> </div> </template> <script> import DatePicker from './DatePicker.vue'; export default { components: { DatePicker }, data() { return { date: { month: 1, year: 2017 } } } }) </script>

위의 코드에서 보면 커스텀 component 로 date-picker 를 볼수 있습니다.

저 date-picker 의 component 을 보겟습니다.

<template> <div class="date-picker"> Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()"/> Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()"/> </div> </template> <script> export default { props: ['value'], methods: { updateDate() { this.$emit('input', { month: +this.$refs.monthPicker.value, year: +this.$refs.yearPicker.value }) } } }; </script>

위에서 보면 v-model 의 값 상속은 value 로 전해 줍니다. 하지만 v-model 은 쌍방향 입니다.

그리래서 보면 tag 에서 @input 이벤트를 updateDate() 메소드에 달아 주고

emit 으로 input 이벤트를 발생 시켜 줄때 값을 넘겨서 업데이트를 해주면

자식->부모로 값을 넘겨 줍니다.