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

<script setup>
import Child from "./Child.vue";
import { ref } from "vue";

const msg = ref("Hello World!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

Child.vue

<script setup>
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>

<template>
  <input :value="props.modelValue" @input="(e) => emit('update:modelValue', e.target.value)" />
</template>

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

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

defineModelを活用した記法

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

Child.vue

<script setup>
const model = defineModel();
</script>

<template>
  <input v-model="model" />
</template>

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

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

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

複数のv-modelを渡す方法

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

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

以下に例を示します。

App.vue

<script setup>
import { ref } from "vue";
import UserName from "./UserName.vue";

const first = ref("John");
const last = ref("Doe");
</script>

<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName v-model:first-name="first" v-model:last-name="last" />
</template>

UserName.vue

<script setup>
const firstName = defineModel("firstName");
const lastName = defineModel("lastName");
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

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

TypeScriptでの使用

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

<script setup lang="ts">
const model = defineModel<string>();
</script>

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

まとめ

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

参考

• Announcing Vue 3.4

• Component v-model

• defineModel