v-model is just a syntactic sugar, equals: value + @ input , real realization or rely on: v-the bind: Bind responsive data, event trigger input and pass data (core and key)
<input v-model="something">
In fact, and following the same
<input :value="something" @:input="something = $event.target.value">
Therefore, the input box assembly with a v-model, it should: receiving a value prop, event trigger input, and pass the new value
Custom components myInput
<template>
<div style="padding-top: 100px;">
<button @click="minu" class="btn">-</button>
<input type="text" :value="currentValue" @input="handleInput" />
<button @click="plus" class="btn">+</button>
</div>
</template>
<script>
export default {
props:['value'],
data () {
return {}
},
computed:{
currentValue:function(){
return this.value
}
},
methods:{
handleInput:function(event){
var value = event.target.value;
console.log(988898)
this.$emit('input', value); //触发 input 事件,并传入新值
},
minu:function(){
var value = this.currentValue - 1
this.$emit('input', value);
},
plus:function(){
var value = this.currentValue + 1
this.$emit('input', value);
},
}
}
</script>
<style type="text/css">
.btn{
width: 60px;
}
</style>
Use the page
<template>
<div class="hello">
<myInput v-model='name'></myInput>
{{name}}
<myInput v-model='othername'></myInput>
{{othername}}
</div>
</template>
<script>
import myInput from "@/components/myInput";
export default {
name: 'HelloWorld',
data () {
return {
name:10,
othername:6,
}
},
components: {
myInput
},
methods:{
}
}
</script>
<style scoped>
</style>
Effect
Summary:
internal custom components typically contain form components native (of course non-form components can also be), then bind events to the native controls to capture the value of the primary components, the use of $ emit method, trigger input method, the component listener then the value of the input event passed
v-model in the interior of the respective input elements use different properties and throw different events:
text and textarea element and attribute value using an input event;
CheckBox and radio and use checked property change events;
SELECT field value as a prop and change as an event.