102
70

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue3でv-modelがどう変わったか

Last updated at Posted at 2020-07-29

はじめに

Vue3になって、v-modelにも少し変更があったようなので、
どう変わったのか動作を確かめてみました。
変更点については、以下を参考にしています。
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md

変更点

通常の使い方は変わらない

これまで通り、<input>要素に対してのv-modelの使い方は変わらないようです。

<input v-model="name" type="text">

値を受けとるProps名がvalueからmodelValueに変更

Vue2.0だと明示的に指定しない場合はvalueというpropsに対してv-modelの値がバインドされていましたが、
Vue3では、modelValueという名前のpropsに対してバインドされるようになっています。

[Vue2以前]

export default {
  props: {
    value: String //ここにv-modelで渡される値が入る
  }
}

[Vue3]

export default {
  props: {
    modelValue: String //ここにv-modelで渡される値が入る
  }
}

複数のデータをv-modelで同期できるようになる

Vue2.0だとv-modelは子コンポーネントのvaluepropsにバインドされていたため、
v-modelによって子コンポーネントの複数のデータと同期することができなかったのですが、
Vue3では、props名を指定することで複数データの同期ができるようになってます。

ParentForm.vue(親)
<name-input
  v-model:familyName="familyName"
  v-model:givenName="givenName"
></name-input>
NameInput.vue(子)
<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>

実のところVue2.0でも複数のデータを同期したい場合は、
.syncを使用することで同様のことができました。(※2.3.0以降)

.sync 修飾子 — Vue.js

例えば、名前を入力するコンポーネントがあった場合、
次のような形で、子のプロパティと同期することができました。

ParentForm.vue(親)

<name-input
  :familyName.sync="familyName"
  :givenName.sync="givenName"
></name-input>
NameInput.vue(子)
<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>

見ての通り子コンポーネント側は変わってないです。
このことから、
今回の変更は、「これまでの.syncをv-modelという名前で使えるようになった」という理解の方が近いと思いました。
.syncはv-modelと同じ動きになるということで、廃止されています。

最後に

内部的な仕様は変わりつつも、
使う側がその変更を極力意識しなくて済むように
アップデートされていていいなと思いました。
v-modelは便利なので、これからも上手く使っていきたいです。

また、間違いや指摘etcがあれば、是非コメントにお願いします!

追記(2021/03/06)

公式ドキュメントにも分かりやすい説明が記載されているのでリンク貼っておききます。
(日)https://v3.ja.vuejs.org/guide/migration/v-model.html
(英)https://v3-migration.vuejs.org/breaking-changes/v-model.html

102
70
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
102
70

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?