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