defineModelの使い方

defineModelを使用することで、definePropsとdefineEmitsが必要だった従来のv-modelの実装よりも簡潔に書くことが可能となります。

defineModelはVue3.3で導入された実験的な機能です。

破壊的な変更が加えられる可能性があるため、注意して使用することを推奨します。

以下はdefineModelを使用すると出る注意書き。

This project is using defineModel(), which is an experimental feature. It may receive breaking changes or be removed in the future, so use at your own risk.
To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503/ .

defineModelを使用することで、definePropsとdefineEmitsを使用することなくv-modelを実装することができます。

definePropsで返される値はReadonlyだったため、子コンポーネント側では代入することができませんでした。

しかし、defineModelにより返される値は、Ref型となります。そのため、値を渡される子コンポーネント側でも値を代入することが可能で、refに近い感覚で使用することができます。

<script setup lang="ts">
const modelValue = defineModel<boolean>();
</script>

<template>
    <input
    :value="modelValue"
    @change="e => modelValue = e.target.checked"
    type="checkbox"
    />
</template>

<script setup lang="ts">
const isChecked = ref<boolean>(false);
</script>

<template>
  <div>
    {{ isChecked }}
    <Checkbox
    v-model="isChecked"
    />
  </div>
</template>

defineModelは実験的な機能なため、Nuxtで利用するためにはnuxt.config.tsの設定が必要です。

下記のように設定すればOK。

export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true
      }
    }
  }
})

v-model:〇〇の形でv-modelを使用するには、defineModelの引数として文字列を与えます。

v-model:与えた文字列 のようにv-modelを使用できるようになります。

<script setup lang="ts">
const modelValue = defineModel<boolean>('checked');
</script>

<template>
    <input
    v-model="modelValue"
    type="checkbox"
    />
</template>

<script setup lang="ts">
const isChecked = ref<boolean>(false);
</script>

<template>
  <div>
    {{ isChecked }}
    <Checkbox
    v-model:checked="isChecked"
    />
  </div>
</template>

definePropsでデフォルト値 を設定することができますが、defineModelにおいてもデフォルト値を設定することができます。

defineModelのオプションとして、defaultが指定できるのでデフォルト値を与えます。

<script setup lang="ts">
const modelValue = defineModel<boolean>({default: true});
</script>

<template>
    <input
    v-model="modelValue"
    type="checkbox"
    />
</template>