Vue2에서의 v-model

부모 페이지에서 쓰는

<my-component v-model="myValue" />

위는

<my-component 
    :value="myValue"
    @input="myValue = $event"     // $event 는 자식 컴포넌트에서 보내주는 값의 예약어.
/>

와 동일하다.
이는 my-component 컴포넌트 내에서

<script>
props: ['value'],
model: {
    prop: 'value',
    event: 'input'
}
</script>

이러한 기본 설정이 생략 되어있다.

:value은 my-component 컴포넌트 내에서
props: [] 에 추가된다.
기본이 value라 prop 이름 변경 없을 시 생략.

:value prop의 이름을 바꿀 수 있는데,
컴포넌트 내 model에 정의해주면 된다.
이벤트 이름도 다른걸로 바꾸고 싶으면

props: {
    ...다른 props,
    changedValue: Array     // prop값의 타입 지정하기
},
model: {
    prop: 'changedValue',
    event: 'newEvent'
}

이렇게 작성하면

<input @input="$emit('newEvent', $event.target.value)" />

컴포넌트 이벤트가 발생할 때

<my-component 
    :changedValue="myValue"
    @newEvent="myValue = $event"
/>

이렇게 실행되고, 이는

<my-component v-model="myValue" @newEvent="myValue = $event" />

와 동일하다.