We mainly use vue project v-model command to create a two-way data binding on the form input, textarea, select other elements, we know that the v-model is essentially just syntactic sugar, v-model using different input elements inside different attributes and throw different events:
- text and textarea elements using the property value and input events;
- checkbox and radio use checked property and change events;
- select field value as a prop and change as an event.
To input form elements as an example:
<input v-model='something'>
Equivalent to
<input v-bind:value="something" v-on:input="something = $event.target.value">
If the custom component, v-model default and using prop named input event named value , as follows:
Parent components: < ModelChild V-Model = "Message" > </ ModelChild > subcomponents: < div > {{value}} </ div > The props: { value: String }, Methods: { test1 () { . The this $ emit ( 'input', 'red') } },