Mencipta Komponen Input Tersuai dengan v-model Binding dalam Vue 3

Apabila membina aplikasi Vue 3, mengurus input borang melalui komponen adalah amalan biasa. Salah satu ciri berkuasa Vue ialah arahan model v, yang memudahkan pengikatan data dua hala. Dalam catatan blog ini, kami akan meneroka cara membuat komponen input tersuai dan menggunakan model v untuk mengikat nilainya dalam komponen induk.

1. Memahami v-model dalam Vue 3

Dalam Vue 3, v-model ialah singkatan untuk mencipta pengikatan data dua hala pada elemen input borang. Arahan tersebut mengikat nilai input pada sifat data dan mendengar perubahan untuk mengemas kini harta tersebut.

<input v-model="password" />

Dalam contoh di atas, sifat data kata laluan terikat pada nilai input. Apabila nilai input berubah, sifat kata laluan dikemas kini secara automatik.

2. Mencipta Komponen Input Tersuai

Katakan kita ingin mencipta komponen input boleh guna semula yang dipanggil BaseInputGroup. Begini rupa komponen itu:

<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. Mengikat v-model dalam Komponen Induk

Untuk menggunakan komponen ini dalam komponen induk dengan model v, anda hanya mengikat model pada sifat data dalam komponen induk. Berikut ialah contoh:

<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. Bagaimana Ia Berfungsi

Prop Nilai Model: Prop ModelValue mewakili nilai input. Ia dihantar daripada komponen induk melalui v-model.

Memancarkan Kemas Kini: Fungsi $updateInputValue mendengar peristiwa input dan memancarkan peristiwa kemas kini:modelValue dengan nilai input baharu. Ini mengemas kini nilai kata laluan komponen induk.

Mengikat dalam Induk: Dalam komponen induk, arahan model v mengikat sifat data kata laluan, memastikan bahawa nilai sentiasa disegerakkan dengan komponen input tersuai.

5. Faedah Menggunakan Komponen Tersuai dengan v-model

Kebolehgunaan semula: Komponen input tersuai boleh digunakan semula merentas aplikasi anda, mengurangkan pertindihan kod.

Pemisahan Kebimbangan: Logik untuk mengendalikan nilai input terkandung dalam komponen, menjadikan komponen induk lebih bersih dan lebih fokus pada fungsi terasnya.

Penyesuaian: Anda boleh melanjutkan komponen input tersuai dengan mudah untuk memasukkan ciri tambahan, seperti pengesahan, jenis input yang berbeza atau gaya tersuai, tanpa menjejaskan komponen induk.

Kesimpulan

Menggunakan model v dengan komponen tersuai dalam Vue 3 ialah cara yang berkesan untuk mengurus input borang dan pengikatan data. Dengan memancarkan peristiwa update:modelValue, anda boleh memastikan bahawa komponen anda kekal selaras dengan sifat data komponen induk, menjadikan kod anda lebih modular, boleh diselenggara dan lebih mudah difahami.

Corak ini amat berguna dalam aplikasi yang lebih besar di mana logik pengendalian input boleh menjadi kompleks dan berulang. Dengan memanfaatkan API komposisi Vue 3 dan arahan model v, anda boleh mencipta komponen yang fleksibel dan boleh digunakan semula yang memudahkan pangkalan kod anda.

Atas ialah kandungan terperinci Mencipta Komponen Input Tersuai dengan v-model Binding dalam Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!