Vue.js - v-model

20 Feb 2019

kr.vuejs.org 사용자 정의 이벤트를 사용하여 폼 입력 컴포넌트 만들기

Vue 이해 부족으로 아래와 같이 된다고 생각 했다.

<div id="app">
<my-component    
    v-model="message"
    ></my-component>
</div>

Vue.component('my-component', {
    props: { message },
    template: '<div> <input type="text" :message>  </div>'
})

new Vue({
    el: '#app',
    data: {
        message: ''
    }
})

v-model을 부모에 선언하면 v-model이 v-bind:value와 @input으로 설정된다.

<input type="text" :value="message"  @input="this.message=$event.target.value">