vueでアプリ書いてて、ちょっと双方向バインディングで引っかかったのでメモです。
vueの双方向バインディングがわからぬ。。。
— 野川の側 (@nogawanogawa) September 27, 2019
データバインディング
vueコンポーネントでは、基本的にはデータはコンポーネントでプライベートなものとなっており、コンポーネント間でデータをやり取りしたい場合はバインディングをする必要があります。
イメージはこんな感じ。
コンポーネントは親子関係を持ち、親→子のデータ連携はv-bindを使用して記述できます。
ただ、複数のコンポーネントでformを構成していて、それらを一括でsubmitする場合などには、子コンポーネントのデータを親コンポーネントで集約して取り扱う必要があります。
双方向バインディング is 何？
vueでは、双方向バインディングのためには、普段何気なく使っていたv-modelで双方向バインディングの記述をするらしいです。 動作イメージとしてはこんな感じです。
CSSフレームワークなどで暗黙の内に使いますが、今回は自作コンポーネントを使って挙動を確認します。
まず、親コンポーネントはこんな感じに書きます。
次に、子コンポーネントはこんな感じになります。
propsだけだとうまくいかんので、泣く泣くv-modelを使ったって感じですね。 変更はupdateで検知して、emitでparentに送っています。
一応こんな感じに同期してます。
基本的には、親->子のバインディングだけになると美しいですが、こういうこともできるんだという話です。
感想
単なるメモなのでこんなもんです。 普段なにも考えずにvuetify使ってて、v-modelとか条件反射で使ってましたが、裏ではこんなことになってたんですね。
勉強になりました。
