技術とかの雑なToday I Learnedメモ

Vueのsync使ってて使わない書き方忘れた

Vueのsync使ってて使わない書き方忘れた

Vueのprops渡すときのsyncが便利だったので、「syncしないでemitされたときに別の処理をしたい」というときの書き方を忘れていた。

カスタムイベント — Vue.js

そもそもsyncは

// Parent.vue
<Child
  :child-prop="childProp"
  @update:child-prop="childProp = $event"
/>

// Child.vue
emit('update:child-prop', value)

を簡単に書けるシンタックスシュガーとして

// Parent.vue
<Child
  :child-prop.sync="childProp"
/>

みたいに書けるというもの。

なので、emit('update:child-prop', value)で受け取った$eventchildPropに代入したくない、別の処理をしたいという場合にはsyncは使えない。

で、まあこれは単純に

// Parent.vue
<Child
  :child-prop="ChildProp"
  @update:child-prop="func($event)"
/>

のようにやればよい。

syncばっか使ってて忘れてた。