KATUBLO
技術のメモ
Vue.jsのsync構文の使い方について紹介
2020-10-14

業務や学習を通じて蓄積した「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)

参考文献

広告:

別の記事で開発の生産性やQOL(Quality of Life)を向上させる上で買って良かったものを紹介しているので良かったらみてください。