VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】

はじめに

2023年12月29日、Vue.js 3.4がリリースとなりました🎉

3.4で追加された機能は以下のブログで確認できます。

この記事ではVue.js 3.4の中で特に便利だと感じたdefineModelについて、実例を交えながら使い方を解説します。

defineModelを使った入力コンポーネントの作成

inputを含むコンポーネントを作成する場合、今までは引数を定義するためのpropsと、親コンポーネントへ値を受け渡す関数を定義するためのemits、どちらも記述する必要がありました。

defineModelを使うとpropsとemitsを記述することなく、入力コンポーネントを実現することができます。

例として、今回は以下のようなコンポーネントを作成してみます。

今回作成するコンポーネント

インプット部分が子コンポーネントとなっており、子コンポーネントのインプットに入力された内容を親コンポーネントに表示しています。

このコンポーネントを従来の記法とdefineModelを活用した記法で作成してみます。

従来の記法

App.vue

Child.vue

子コンポーネント内でpropsを定義することで親コンポーネントから値を受け取り、emitsを定義することで親コンポーネントへ値を送れるようにしています。

また、propsで定義した値は書き込みが出来ないため、v-modelに設定することができません。
代わりに、:valueにpropsを設定することによって値を表示、@inputに入力時の処理を書いています。

defineModelを活用した記法

App.vueは上記と同じです。

Child.vue

propsとemitsを記述する代わりに、defineModelを記述することで変数の受け取りと変更ができるようになります。

また、v-modelの値は変更可能なので、そのままinputタグのv-modelにdefineModelで定義した変数を渡すことができます。

上記のコードは、以下のプレイグラウンドで動作させることができます。

複数のv-modelを渡す方法

複数のv-modelを使用する場合は、v-model引数を用いてv-model:変数名と記述します。

子コンポーネントではdefineModelに引数を与えてdefineModel('変数名')と記述します。

以下に例を示します。

App.vue

UserName.vue

上記のコードは、以下のプレイグラウンドで動作させることができます。

TypeScriptでの使用

defineModelは型引数を取ることができます。

型引数を記述することによって、defineModelが受け入れられる型を制限することができます。

まとめ

この記事ではVue.js 3.4の中で特に便利だと感じたdefineModelについて、実例を交えながら使い方を解説しました。
defineModelを使うと入力コンポーネントを少ないコード量で書くことができるので、ぜひ使ってみてください。

参考

• Announcing Vue 3.4

• Component v-model

• defineModel