Vue.jsの.syncの使い方についてわかりやすく解説

Vue.js

Vue初心者がやりがちなミス

Vueは子要素で親コンポーネントの値を更新できない

Vueを書き始めたばかりのエンジニアは恐らく次のエラーに出会い、困惑すると思います。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. So let’s keep this in mind, mutating props is a no-go in Vue. js

このエラーは恐らく、親コンポーネントからコンポーネントに渡したpropsを子コンポーネントで更新してしまったがために発生するエラーです。Vue.jsの規則として、親コンポーネントからもらったpropsを子コンポーネントで書き換えてはいけないことになっています。

どのようにして子コンポーネントを使って値を更新するのか

子コンポーネントがinputやtextareaの場合、親から渡された値を更新するに決まってるじゃないかと思うのは当然です。もちろん、更新はします。子コンポーネントではなく、親コンポーネントで。Vueが用意している$emitイベントと呼ばれるメソッドを使って子コンポーネントでpropsが更新されたときその変更を親コンポーネントに通知します。

emitの使い方を具体例で解説

次のコードはファイルが選択される毎に親要素に対して、emitでonFileChangeから渡されるeを親コンポーネントに対して送信しています。

<template>
  <div>
    <input style="display:none;" type="file" accept="image/*" @change="onFileChange" />
  </div>
</template>

<script>
export default {
  methods: {
    onFileChange(e) {
      this.$emit('change', e)
    },
  },
}
</script>

親コンポーネントは@changeとしてイベントハンドラーを渡して、子コンポーネントが送信した値を受け取ることができます。

<upload-image @change="setFile($event)" />

Vueのsyncとは

propsとemitをシンプルに記述する為のシンタックスシュガー

syncを使うと子コンポーネントに対して渡すpropsと子要素から受け取るイベントリスナーを短いコードで綺麗に記述することができます。次の2つのプログラムの意味は全く同じです。

<component
  :title="doc.title"
  :update:title="doc.title = $event"
></component>
<component :title.sync="doc.title"></component>

ただそれだけです。何にも難しいものではありません。このようにコードを短く書く為に用意された構文をシンタックスシュガーと言います。

v-modelとsyncの使い分け

バインドするデータの個数に依存する

この記事ではv-modelが何なのかの解説はしません。興味のある方は別の記事にまとめてありますのでそちらをご覧ください。

《Vue.js》v-modelとは?使い方を初心者向けにわかりやすく解説
v-modelとは 双方向のデータバインディングを実現する 公式サイトには次のように書かれています。 ou can use the v-model directive to ...

v-modelは1つのデータをバインディングするためのシンタックスシュガーです。なので、複数のデータをバインディングすることはできません。なので、そのような場合は今回の記事で解説したsyncを使うようにしましょう。

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました