Vue3のv-modelショートハンドにいまいち慣れない

Vue2時代のv-model相当機能はVue3でこういう仕様に変化した。
コードは公式docより抜粋。

https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax

<ChildComponent v-model="pageTitle" />

<!-- would be shorthand for: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-modelを使う親側の使用感は大きな変化なし。しかし子側の記法はそこそこ変わっている。

export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title)
    }
  }
}

modelValue、長い。何度か書いてみたが毎回忘れてdocを読み直している。
思うにVue3のv-model記法は、v-modelで書きたいからそういう風に用意しておくというよりは、使いたくなったらv-modelでも書ける風に考えておいたほうがいいかもしれない。

どういうことかというと、v-modelショートハンドを使うためにmodelValueという特殊なpropsを用意するのではなく、普通に用途に応じた名前で用意しておく。

export default {
  props: {
    text: String
  },
  emits: ['update:text'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:text', title)
    }
  }
}

親側は名前指定でv-modelを使う。

<ChildComponent v-model:text="pageTitle" />
<ChildComponent
  :text="pageTitle"
  @update:text="pageTitle = $event"
/>

名前こそv-modelを継承しているが、実質これはVue2時代のv-modelよりも、**.sync記法の後継と考えたほうが実態に近い。
無理にv-modelショートハンドを使おうとしなければmodelValueという突然沸いてくる存在も意識しなくて済む。

ただしform系コンポーネントはv-modelショートハンドで素のform系要素と同様な使い心地にしておきたいことが多いはず。なので完全に使わない方向に倒すのもそれはそれで不便そう。