[Vue] v-model (양방향 바인딩)

 

v-model 속성은 v-bind와 v-on의 기능을 합쳐놓은 문법입니다.

input, checkbox, selectbox, textarea 와 같은 태그에서 value값을 실시간으로 전달해줍니다.

<template>
	<div>
    	<input 				
            type="type"
            v-model="text">
        <p>{{ text }}</p>
    </div>       
</template>

 

<script>
    new Vue({
        el: '#app',
        data: {
            text: '텍스트영역',
        },
    });
    
    export default {
        name: 'app',
        data() {
            return {
                text: '텍스트영역',
            }
        },
    }
</script>

 

 

컴포넌트에 v-model 사용하기

VueInput.vue 컴포넌트(자식)

<template>
	<input 				
		type="type"
        :value="value"
		@input="change" >
</template>

<script>
export default {
	name: 'VueInput',
	props: [
		// 부모에서 v-model로 던진값을 value로 받음
		'value',
	],
	methods: {
		// 부모에게 input이벤트를 던져준다.
		// 반드시 input이벤트여야 함, v-model은 input이라는 이벤트로 받기 때문이다.
		change: function($event) {
			this.$emit('input', $event.target.value)
		}
	}
}
</script>

App.vue (부모)

<template>
	<div>
        <vue-input 		
            v-model="inputId"/>		          
        <p>ID : {{ inputId }}</p>
	</div>
</template>

<script>
import VueInput from '../components/VueInput.vue'

export default {
    components: { VueInput },
	name: 'app',
	data() {
		return {
			inputId: '',
		}
	},
}
</script>