Vue 3.4 defineModel 双方向バインディングプレイグラウンド

このインタラクティブプレイグラウンドは、Vue 3.4のdefineModelの概念をカスタム双方向バインディングコンポーネントで示します。レンジスライダーとカラーピッカーは、modelValueプロパティとupdate:modelValueイベントを使用したv-modelパターンを採用し、親子間の状態同期を実演します。スライダーを動かすか色を選択すると、親の状態がリアルタイムで更新されます。