Bagaimana untuk melaksanakan komponen tersuai model V dalam Vue?

Vue.js ialah rangka kerja JavaScript sumber terbuka yang sangat popular dalam bidang pembangunan bahagian hadapan moden Ia memudahkan banyak masalah dalam proses pembangunan bahagian hadapan dan menjadikannya lebih mudah untuk membangunkan aplikasi yang kompleks melalui komponenisasi.

Salah satu ciri yang sangat berguna ialah dengan mudah melaksanakan pengikatan data dua hala dalam komponen menggunakan arahan model-v. Walaupun Vue.js menyediakan banyak komponen input terbina dalam, jika anda memerlukan komponen input tersuai, anda boleh melaksanakan komponen tersuai model v untuk memenuhi keperluan anda.

Artikel ini akan memperkenalkan cara menggunakan komponen tersuai Vue.js untuk melaksanakan model v.

Cara v-model berfungsi

Dalam dunia Vue.js, v-model bukanlah sihir. Malah, ia hanyalah gula sintaksis yang membolehkan kita menentukan nilai komponen input dan mendengar perubahannya sekali gus. Di bawah tudung, v-model melakukan sesuatu, tetapi memahami butiran ini tidak perlu.

Dalam komponen input dengan model v, kita boleh menggunakan prop dan acara untuk melaksanakan gelagat model v. prop menerima nilai daripada komponen induk dan menyerahkannya kepada komponen anak. Acara mendengar perubahan dalam nilai input dalam komponen induk dan menghantar nilai baharu kepada komponen induk. Kedua-duanya digabungkan untuk melaksanakan pengikatan data dua hala bagi v-model.

Melaksanakan komponen tersuai

Untuk menggunakan model v, kita perlu mentakrifkan nilai prop bernama dan input bernama peristiwa dalam komponen. Kedua-dua nama ini adalah tetap dan tidak boleh diubah. nilai ialah nilai dalam komponen input, dan peristiwa input ialah peristiwa yang memberitahu komponen induk tentang perubahan dalam nilai input.

Berikut ialah contoh komponen tersuai ringkas yang menggunakan pustaka gaya Bootstrap untuk memaparkan kotak input teks:

<template>
  <div class="form-group">
    <label>{{ label }}</label>
    <input
      :id="name"
      :type="type"
      :value="value"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)"
      class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    name: String,
    label: String,
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
};
</script>

Terdapat beberapa perkara penting yang perlu diperhatikan dalam komponen ini:

1. Kami mentakrifkan nilai prop bernama dan menggunakannya dalam kotak input untuk memulakan nilai kotak input. Kemudian, prop ini akan digunakan untuk mengemas kini nilai kotak input.
2. Atribut @input mendengar peristiwa input kotak input. Peristiwa ini dicetuskan apabila nilai kotak input berubah. Kami menggunakan kaedah $emit untuk menghantar peristiwa input kepada komponen induk, menghantar nilai baharu sebagai parameter.

Ini sahaja yang kami perlukan. Sekarang, jika kita menggunakan komponen MyInput dalam komponen induk untuk mencipta kotak input, kita boleh menggunakan arahan model v untuk pengikatan data dua hala:

<template>
  <div class="container">
    <my-input v-model="name" name="name" label="Name" />
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  name: 'App',
  components: {
    MyInput
  },
  data() {
    return {
      name: ''
    };
  }
};
</script>

Perhatikan bahawa kami menggunakan model v untuk mengikat nama pembolehubah dengan komponen MyInput untuk mengikat. Pembolehubah nama di sini digunakan untuk menyimpan nilai semasa kotak input.

Kini, jika kita memasukkan nilai dalam kotak input, kita boleh mengakses nilai ini dalam komponen induk dan memaparkan ucapan. Apabila kami menaip pada kotak input, Vue.js akan mengemas kini nilai dalam komponen induk secara automatik dan menyerahkannya kepada prop nilai komponen MyInput.

Ringkasan

Dalam artikel ini, kami memperkenalkan secara ringkas cara v-model berfungsi dalam Vue.js dan menunjukkan cara mencipta komponen input tersuai untuk menyokong v-model. Dengan menetapkan prop nilai dan peristiwa input, kita boleh menjadikan komponen tersuai sama dengan komponen input terbina dalam menggunakan model v dan menyediakan gelagat tersuai.

Kaedah ini berguna jika anda perlu mencipta komponen input yang diperibadikan semasa membangunkan aplikasi. Menggunakannya, anda boleh mendayakan komponen input anda untuk pengikatan data dua hala menggunakan model v.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen tersuai model V dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!