Vue 3のv-modelをプロップとして使用する方法

しかし、一部の場合では、子コンポーネントがv-modelディレクティブを持つ必要がありますが、その値を直接変更する必要はありません。そのような場合には、v-modelをプロップとして子コンポーネントに渡す方法があります。

以下に、この方法を実現するシンプルで簡単な手順とコード例を示します。

親コンポーネントでv-modelを使用してデータをバインドします。例えば、以下のようなコードです。

<template>
  <div>
    <ChildComponent v-model="childValue" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      childValue: '初期値',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

子コンポーネントでプロップとしてv-modelを受け取ります。以下のようなコードです。

<template>
  <div>
    <input :value="internalValue" @input="$emit('update:modelValue', $event.target.value)" />
  </div>
</template>
<script>
export default {
  props: ['modelValue'],
  computed: {
    internalValue: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },
};
</script>

この例では、子コンポーネントはv-modelをプロップとして受け取り、内部的にはinternalValueという名前の計算プロパティを使用して値を保持します。子コンポーネントで入力フィールドの値が変更されると、@inputイベントを使用して親コンポーネントに値を伝えます。

以上がVue 3でv-modelをプロップとして使用する方法の基本的な手順です。これにより、親コンポーネントと子コンポーネント間で双方向のデータバインディングを実現することができます。

この方法は、親コンポーネントが子コンポーネントの状態を直接制御しなくても、データのフローを簡潔に保つことができるため、コンポーネント間のコミュニケーションに役立ちます。

以上が、Vue 3のv-modelをプロップとして使用する方法に関する解説です。