(I) V-Model in form input
<input v-model="something">
Copy the code
The V-model directive is actually a syntactic sugar wrapper
<input
:value="something"
@:input="something = $event.target.value">
Copy the code
My understanding is that the form is going to read values dynamically
(2) V-Model in user-defined components
When using a V-Model on a component
Vue custom component v-model syntax sugar:
<custom v-model='something'></custom>
Copy the code
Is equal to the
<custom :value="something" @input="value => { something = value }"></custom>
Copy the code
The custom component V-Model used in Vue2.0 is:
Therefore, for a component with a V-Model, it should look like this:
- Receive a Value Prop
- Fires the input event and passes in a new value
Emit input events using $emit:
/ / component
<custom v-model='something'></custom>
// Component internal listener
watch:{
newValue(){
this.$emit('input'.this.newValue)
}
}
Copy the code
The default value is value, which can be defined by model
The use of a custom component V-model in Vue3.0 is:
It’s the same principle that changed in VUe3.0
Use the custom component V-Model
Internally, update events are dispatched. Default prop value is changed to modelValue
Components,
By default, V-models on components use modelValue as prop and Update :modelValue as events. We can change these names by passing parameters to the V-Model:
The official documentation