Vue3でフォーム部品のコンポーネントを作る際に困った

Vue3に慣れる練習がてらにフォームのinputのコンポーネントを作成して利用してみることにしました。qiitaなんかで調べてみるとinputのコンポーネントは以下のような感じです。

●OldInput.vue

<template>
 <input
  type="text"
  :value="value"
  @input="$emit('input', $event.target.value)"
 />
</template>

<script>
export default {
 name: "OldInput",
 props: {
  value: String,
 }
}
</script>

呼び出し元は以下のような感じです。

<OldInput v-model="sampletext"></OldInput>

で、これに沿って作ってみたのですが、どうも期待どおりに
動きません。（コンポーネントに値が渡らず、コンポーネントからも戻って来ない）

悩んだ挙げ句、英語版のvue3のドキュメントを読んでて、vue3では、v-modelのpropの値とemitのイベントが変更になったことがわかりました。orz

●Migration Guide

BREAKING: When used on custom components, v-model prop and event default names are changed:
prop: value -> modelValue;
event: input -> update:modelValue;

ということで、コンポーネントを以下のように修正すると期待通りの動作になりました。

●NewInput.vue

<template>
 <input
  type="text"
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
 />
</template>

<script>
export default {
 name: "NewInput",
 props: {
  modelValue: String,
 }
}
</script>

ちなみに呼び出し元は

<NewInput v-model="sampletext"></NewInput>

です。

ドキュメントが英語版しかなかったので、qiitaとかで調べたんですが、まずはドキュメントを読まないと駄目ですね。

 

※modelという名前を変更したい場合、v-modelに引数を与える方法があります。（以下ではtitle）

●呼び出し元

<NewInput v-model:title="sampletext"></NewInput>

●NewInput.vue

<template>
 <input
  type="text"
  :value="title"
  @input="$emit('update:title', $event.target.value)"
 >
</template>

<script>
export default {
 name: "NewInput",
 props: {
  title: String
 },
}
</script>

 

関連記事