Vue 3 で v-model バインディングを使用したカスタム入力コンポーネントを作成する

Vue 3 アプリケーションを構築する場合、コンポーネントを通じてフォーム入力を管理するのが一般的です。 Vue の強力な機能の 1 つは、双方向のデータ バインディングを簡素化する v-model ディレクティブです。このブログ投稿では、カスタム入力コンポーネントを作成し、v-model を使用してその値を親コンポーネントにバインドする方法を検討します。

1. Vue 3 の v-model を理解する

Vue 3 では、v-model はフォーム入力要素で双方向のデータ バインディングを作成するための短縮形です。このディレクティブは、入力の値をデータ プロパティにバインドし、変更をリッスンしてプロパティを更新します。

<input v-model="password" />

上記の例では、パスワード データ プロパティが入力値にバインドされています。入力値が変更されると、パスワードのプロパティが自動的に更新されます。

2. カスタム入力コンポーネントの作成

BaseInputGroup という再利用可能な入力コンポーネントを作成するとします。コンポーネントは次のようになります:

<template>
  <div class="flex flex-col text-white mx-5 md:mx-0 space-y-2 mb-2">
    <label :for="labelFor">
      {{ labelFor.toLocaleUpperCase() }}
    </label>
    <input
      :type="type"
      :name="name"
      @input="$updateInputValue"
      :value="modelValue"
      class="p-2 px-4 rounded-2xl bg-white/15 focus:outline-none focus:ring focus:border-blue-500"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineOptions, defineEmits } from 'vue'

defineOptions({
  inheritAttrs: false
})

defineProps({
  labelFor: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'text'
  },
  modelValue: {
    type: [String, Number],
    default: ''
  }
})

// Emit an event to update the v-model in the parent component
const emit = defineEmits(['update:modelValue'])
const $updateInputValue = (event: Event) => {
  const input = event.target as HTMLInputElement
  emit('update:modelValue', input.value)
}
</script>

3. 親コンポーネントで v-model をバインドする

このコンポーネントを v-model の親コンポーネントで使用するには、モデルを親コンポーネントのデータ プロパティにバインドするだけです。以下に例を示します:

<template>
  <BaseInputGroup
    labelFor="password"
    name="password"
    type="password"
    v-model="password"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseInputGroup from './components/BaseInputGroup.vue'

const password = ref('')
</script>

4. 仕組み

モデル値プロパティ:modelValue プロパティは入力の値を表します。これは、v-model を介して親コンポーネントから渡されます。

更新の発行: $updateInputValue 関数は入力イベントをリッスンし、新しい入力値を含む update:modelValue イベントを発行します。これにより、親コンポーネントのパスワード値が更新されます。

親でのバインド: 親コンポーネントでは、v-model ディレクティブがパスワード データ プロパティにバインドされ、値が常にカスタム入力コンポーネントと同期していることが保証されます。

5. v-model でカスタム コンポーネントを使用する利点

再利用性: カスタム入力コンポーネントはアプリケーション全体で再利用できるため、コードの重複が削減されます。

懸念事項の分離: 入力値を処理するロジックがコンポーネント内にカプセル化されているため、親コンポーネントがよりクリーンになり、そのコア機能に重点が置かれます。

カスタマイズ: 親コンポーネントに影響を与えることなく、カスタム入力コンポーネントを簡単に拡張して、検証、さまざまな入力タイプ、カスタム スタイルなどの追加機能を組み込むことができます。

結論

Vue 3 のカスタム コンポーネントで v-model を使用することは、フォーム入力とデータ バインディングを管理する強力な方法です。 update:modelValue イベントを発行すると、コンポーネントが親コンポーネントのデータ プロパティと確実に同期し、コードがよりモジュール化され、保守しやすくなり、理解しやすくなります。

このパターンは、入力処理ロジックが複雑で反復的になる可能性がある大規模なアプリケーションで特に役立ちます。 Vue 3 のコンポジション API と v-model ディレクティブを活用することで、コードベースを簡素化する柔軟で再利用可能なコンポーネントを作成できます。

以上がVue 3 で v-model バインディングを使用したカスタム入力コンポーネントを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。