Vue.jsのsync構文の使い方について紹介

業務や学習を通じて蓄積した「Vue.js/Nuxt.js」のTIPSをアウトプットしていこうと思います。

sync構文

子コンポーネントに対して親コンポーネントからPropsで変数を渡し、子コンポーネントで値の更新イベントを親コンポーネントに伝搬させて、親コンポーネントで変数を更新する処理を書きたいとする。次のような構文だ。

<text-document
  :title="doc.title"
  @update:title="doc.title = $event"
></text-document>

このときsync構文を使うと次のように綺麗に書ける。

<text-document v-bind:title.sync="doc.title"></text-document>

update:titleという書き方が重要でsync構文を使って、子コンポーネントで親にイベントをemitしたい場合はupdate:<props名>でイベント名を指定する必要がある。次のような感じ。

this.$emit('update:title', newTitle)

参考ドキュメント:

https://vuejs.org/v2/guide/components-custom-events.html