The use of V-Model in Vue3

Developers using Vue are certainly familiar with the V-Model in Vue2, and it’s very comfortable to write, but the V-Model has changed a lot in VUe3. Here is a brief explanation of the use of the new syntax for V-model in Vue3 and why.

The use and problems of V-model in Vue2. X

The use of V-model in VUe2. X

Let’s first look at the use of v-Model in VUe2. X.

<ChildComponent v-model = "title /> 
Copy the code

It is actually short for:

<ChildComponent :value = "title"  @input = "title = $event" /> 
Copy the code

That is, it actually passes an attribute value and then receives an input event.

The problem of V-model in vue2. X

Although v-Model is convenient and simple to use in ve2. X, there is a problem: it must be passed a value and receive an input event. In fact, not all elements are suitable for passing a value. For example, when the value of type is checkbox, checked is actually checked, and value is something else. And in some cases, components do not fire events through input. That is, value and input events will work in most cases, but there are cases where value has a different meaning or cannot be triggered with input, and we can’t use v-model shorthand. To solve this problem, Yu Creek introduced the Model component option in Vue2.2, which means that you can specify the values and properties of the V-Model binding using the model. As follows:

<ChildComponent v-model="title" />
Copy the code

Set it like this in the child component:

export default {
  model: {
    prop: 'title'.// The attribute name of the V-model binding
    event: 'change'  // V-model bound events
  },
  props: {
    
    value: String.// Value has nothing to do with v-model
    title: {         // Title is an attribute bound to v-model
      type: String.default: 'Default title'}}}Copy the code

From the code above, we can see that by setting the Model option, we can directly use the specified properties and events without having to use value and input. Value and input can be used separately.

Use of V-Model in Vu3

Basic use of V-Model in Vue3

Since the main reason for v-model in vue2. X is that value and input events may have other uses, can we use other attributes and methods directly without having to define them through model? Vue3 does this. Instead of binding value, v-Model binds modelValue and receives update:modelValue instead of input. The usage method is as follows:

<ChildComponent v-model = "title">
Copy the code

It is short for:

<ChildComponent :modelValue = "title" @update:modelValue = "title = $event">
Copy the code

In the child component it is written as:

export default defineComponent({
    name:"ValidateInput".props: {modelValue:String.// The attribute value of the V-model binding
    },
    setup(){
        const updateValue = (e: KeyboardEvent) = > {
          context.emit("update:modelValue",targetValue);   // The method of passing}}}Copy the code

So in VUe3, value is changed to modelValue and input is changed to Update :modelValue.

Replace v-Model parameters

Vue3 uses modelValue instead of value, but modelValue is not readable enough to look at in the props of a child component. Therefore, we hope to be more aware of the name. Instead of using the Model option as in VUe2, you can change the name by passing the parameter XXX through: XXX. The usage is as follows:

<ChildComponent v-model:title="title" />
Copy the code

You can then use title instead of modelValue in child components.

export default defineComponent({
    name:"ValidateInput".props: {// modelValue:String,
        title:String.// title replaces modelValue
    },
    setup(){
        const updateValue = (e: KeyboardEvent) = > {
        // context.emit("update:modelValue",targetValue); // The method of passing
          context.emit("update:title",targetValue);   // The method of passing}}}Copy the code

In other words, our final method of use is:

<ChildComponent v-model:title="title" />
/ / or
<ChildComponent :title="title" @update:title = "title = $event" />
Copy the code

Ok, so far, we have covered the use of V-Model in VUe2 and the problems, and the new syntax for using V-Model in VUe3. Try vuE3 now.