自分のコンポーネントでもv-modelを使う

2018年12月25日火曜日

自分のコンポーネントでもv-modelを使う

通常のinputに何か付加機能みたいなものを付けて、コンポーネントとして提供する、というようなことはよくあるのだけど、その場合も、普通にinputにするみたいにv-modelを使って値をやり取りすると良い。

コンポーネントでv-modelを使う

Vueは公式ドキュメントが非常に良く出来てるので、それを見れば良い。
良いのだけど、かいつまんで書いておくと、v-model="data"は、:value="data" @input="data = $event" の糖衣構文なので、コンポーネント側ではpropsにvalueを定義して、valueの変更が行われるようなときにはthis.$emit('input',value)みたいなイベントを発行すれば動くという話。

公式のサンプルみたいに、value(v-modelじゃなく)にバインドして、inputイベントをそのまま親に投げ直すというやり方でも良いし、computedのget,setを利用してみても良いかなと思う。以下のような感じ。

See the Pen v-model by 餅屋 (@omochi) on CodePen.

＊