What is the difference between v-model and .sync when used on a custom component

by

For Vue.js 2 both pretty much do the same thing – enable two-way binding, although .sync is more versatile. It was added after v-model was added for components. .sync allows to use v-model logic for more than one prop. Let’s compare:

<comp
  :value.sync="username"
  :age.sync="userAge"
/>

expands to:

<comp
  :value="username"
  :age="userAge"
  @update:value="val => username = val"
  @update:age="val => userAge = val"
/>

<input v-model="userName1" />
<comp v-model="userName2" v-model:profile-name="profileName" />

expands to:

<input
  :value="userName1"
  @input="event => userName1 = event.target.value"
/>

<comp
  :value="userName2"
  :profile-name="profileName"
  @update:value="val => userName2 = val"
  @update:profile-name="val => profileName = val"
/>

The differences as we can see are:

  • the default prop name v-model always binds to property called value

  • .sync allows you to use multiple props

  • the event name emitted from component (@update for .sync and @input for v-model)

One very interesting feature of .sync is its special handling of objects. The .sync modifier when used on an object will set multiple props at once (more here)

Which one to use? It is a standard pattern to use property value as the key value carrier for a component. In this situation if you have value property and want to enable 2-way binding for it then use v-model. In all other cases use .sync

Leave a Comment