By default, a V-Model on a component makes use of a prop named Value and an event named Input

Vue.component('custom-input', {
  props: ['value'].template: `  `
})
Copy the code
<custom-input v-model="searchInput"></custom-input>
Copy the code

But input controls like checkboxes, checkboxes, and so on might have value as the content of the server’s submission, and you can specify other properties through mode

Vue.component('custom-checkbox', {
  model: {
    prop: 'checked'.event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `  `
})
Copy the code
<custom-checkbox v-model="selectFramework"></custom-checkbox>
Copy the code

vue3

V-model Prop and event default names have been changed:

Prop property: value changes to -> modelValue; Event Event: input changes to -> update:modelValue;

In 3.x, the V-Model on the custom component is equivalent to passing the modelValue Prop property and receiving the Update :modelValue event thrown:

Vue.component('custom-input', {
  props: ['modelValue'].template: `  `
})
Copy the code
<custom-input v-model="searchInput"></custom-input>
Copy the code

V-model parameters are added

If we need to change the Model name instead of changing the Model option within the component, we can now pass a parameter to Model:

Vue.component('custom-checkbox', {
  props: {
    checked: Boolean
  },
  template: `  `
})
Copy the code
<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>
Copy the code

In the code above, we can see that v-model is followed by a colon passing parameter :checked, indicating that v-Model is bound to the checked attribute. The event that is triggered is specified by the update: attribute. Note that the format is fixed, and the attribute name must be update:.

Sync modifier removed

The parent can listen for this event and update the local data property if needed. Such as:

<custom-checkbox :checked="selectFramework" @update:checked="selectFramework = $event"></custom-checkbox>
Copy the code

For convenience, we can use the.sync modifier to abbreviate, as follows:

<custom-checkbox :checked.sync="selectFramework"></custom-checkbox>
Copy the code

The.sync modifier for bind and the model option for components in VUe3 have been removed and v-model will be used instead.

<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>
Copy the code

It also allows us to use multiple V-Models on custom components.

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent"/ > <! --><ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>
Copy the code

You can now use multiple custom components instead of one.