【Vue】親子間での双方向バインディング

親子間でのデータの受け渡しには

• 親→子：props
• 子→親：emit

で受けわたすのが通例だが、これを使わなくても v-model で双方向バインディングを行うことが可能。

親ページ

データは親ページに持たせる。
今回は仮に form として、

index.vue

<hoge-form v-model="form"/>

子コンポーネントのカスタムタグに v-model="form" を渡す。

子コンポーネント

HogeForm.vue

  model: {
    prop: 'user',
    event: 'input'
  },
  props: {
    user: {
      type: Object,
      default: null,
    },

親ページでわたした form が、子ページに props の value という名前で入ってくるようになるので、子ページでも {{value.user_name}} とデータが使えるようになる。
value という名前じゃ気持ち悪い、というのであれば上記のように model ディレクティブで名前を変更することが可能。

注意点

子コンポーネントのディレクティブで event='input' となっているように、フォームデータのバインディングはinput時のみ実行される。
なので、手入力なら問題ないがボタンを押すことでデータ入るような場合は検知してくれない。

そのため、 v-model のみでフォームデータの入力内容を親に渡すと場合によってはinput以外での入力データについては取りこぼしがでてしまうこともある。
なので、念のため最後に emit で親ページへデータを渡すようにしたほうがよい。