(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