自分のコンポーネントでも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.

＊

Vue.js入門 基礎から実践アプリケーション開発まで

posted with amazlet at 18.12.25

技術評論社 (2018-09-22)
売り上げランキング: 3,768

Amazon.co.jpで詳細を見る