v-modelThe principle of

The V-Model can be applied to either form elements or custom components; in either case, it is a syntactic sugar that ultimately generates a property and an event

When applied to a form element, VUE generates the appropriate attributes and events based on the type of form element being applied. For example, it generates the value attribute and input event when applied to a plain text box, and the Checked attribute and change event when applied to a single or multiple check box.

V-model can also be applied to custom components, and when applied to custom components, it generates a value property and an input event by default.

<Comp v-model="data" />
<! -- equivalent to -->
<Comp :value="data" @input="data=$event" />
Copy the code

Developers can change generated properties and events through the component’s Model configuration

// Comp
const Comp = {
  model: {
    prop: "number".// The default is value
    event: "change" // Default is input
  }
  // ...
}
Copy the code

<Comp v-model="data" />
<! -- equivalent to -->
<Comp :number="data" @change="data=$event" />
Copy the code