v-model principle?

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') 
  } 
},

 

Guess you like

Origin www.cnblogs.com/Rivend/p/12628616.html