vmodel / v-model 사용법 / 내 component에 v-model 넣기 /
vuejs 에서 component
v-model 사용법
아래처럼 만들어서 사용하면 된다.
<MyInput v-model="myvalue" />
// MyInput.vue
//
<template>
<input :value="value" @input="handleInput" />
</template>
<script>
export default {
prop: {
value: {
type: String,
default: '',
},
},
model: {
// 다음은 default 값들이다. 이 'model' 이 없으면 'value', 'input' 이 기본 값이 된다.
prop: 'value', // value prop 을 이용
event: 'input' // handler 를 input event 에 attach 한다.
},
data () {
return {
}
},
methods: {
onInput(evt){
this.$emit('input', evt.target.value)
}
},
watch: {
// for test
value(newVal, oldVal){
console.log(`value = ${newVal}`)
},
},
}
</script>
<MyInput v-model="myvalue" />
는 vuejs 가 아래처럼 변경하게 된다.
<MyInput :value="myvalue" @input="$$v => myvalue = $$v" />
// js
_c("MyInput", {
model: {
value: _vm.myvalue,
callback: function ($$v) {
_vm.myvalue = $$v
},
expression: "myvalue",
},
}),
data flow, 데이터 흐름
대략 아래와 같은 순서로 움직인다. 즉, 값이 변경되면, element 의 value
를 변경하지 않고, 그 값이 변경됐다고 parent component 로 알리고(emit),
parent 의 값을 변경한다. 그러면 그 값이 component 의 prop으로 전달되고,
그 prop 의 값을 element 의 value 에 반영하게 된다.
typing
--> 'input' event
--> 'input' event handler
--> emit 'input' event
--> update the 'myvalue'
--> update the MyInput's prop.value
다른 prop 과 event 를
사용하기
다음처럼 model 부분을 변경하면 된다.
// MyInput.vue
//
<template>
<input :value="value2" @input="handleInput" />
</template>
<script>
export default {
prop: {
value2: {
type: String,
default: '',
},
},
model: {
prop: 'value2', // value2 prop 을 이용
event: 'input2' // handler 를 input2 event 에 attach 한다.
},
data () {
return {
}
},
methods: {
onInput(evt){
this.$emit('input2', evt.target.value)
}
}
}
</script>
위에서
<MyInput v-model="myvalue" />
가 아래처럼 변경된다고 했는데,
<MyInput :value="myvalue" @input="$$v => myvalue = $$v" />
// js
_c("MyInput", {
model: {
value: _vm.myvalue,
callback: function ($$v) {
_vm.myvalue = $$v
},
expression: "myvalue",
},
}),
그러면 model 에서 값을 바꾸면, 아래처럼 될까?
<MyInput :value2="myvalue" @input2="$$v => myvalue = $$v" />
실제로 render부분의 js code 를 보면 변하지 않는다. 즉, 다른 layer
에서 처리하도록 되어 있다고 보면 된다. 좀 더 자세한 사항은 vuejs code를
확인하자.
// js
_c("MyInput", {
model: {
value: _vm.myvalue,
callback: function ($$v) {
_vm.myvalue = $$v
},
expression: "myvalue",
},
}),
