Vue.js3でのv-modelのメモ

Vue.jsのバージョン3では、v-modelの仕様が結構変わっているのでそれのメモ。

サンプルコード

シンプルなパターン

modelValueプロパティを使った値の受け渡しになっていて、値の変更は、update:modelValueイベントを発火することで親コンポーネントに通知できるようになっています。
※バージョン2の頃の、valueプロパティとinputイベントの発火からは変更になっています。

子供側コンポーネントのコード

export default {
  name: 'ChildComponent',
  props: {
    modelValue: String,
  },
  data: () => {
    return {
      i: 1
    }
  },
  methods: {
    change: function () {
      const count = this.i++;
      this.$emit('update:modelValue', `${this.modelValue.replace(/:.+$/, '')}: ${count}`)
    }
  }
}

親側のコンポーネント

<template>
  <child v-model="str" />
</template>

名前付きのv-modelを使うパターン

v-modelの引数に名前を指定することで、その名前のプロパティを使った受け渡しが可能になります。 子供のコンポーネントでは、任意の名前でプロパティを定義して、値の変更はupdate:プロパティ名で発火することで親コンポーネントに通知できるようになっています。

子供側のコンポーネント

export default {
  name: 'ChildComponent',
  props: {
    name: String
  },
  methods: {
    change() {
      this.$emit('update:name', '変更されたよ')
    }
  }
}

親側のコンポーネント

<template>
  <child v-model:name="str" />
</template>