vue menetapkan v-model kepada komponen

Vue ialah rangka kerja bahagian hadapan yang popular yang menggunakan pendekatan berkomponen untuk membina aplikasi yang kompleks. Dalam Vue, v-model ialah sintaks khas yang digunakan untuk mengikat nilai komponen dua hala kepada data komponen induk. Secara lalai, model v hanya boleh digunakan dengan elemen bentuk HTML biasa seperti kotak teks, butang radio dan kotak semak. Walau bagaimanapun, kami boleh memanjangkan skop model v melalui arahan tersuai atau pemalam supaya ia boleh digunakan pada komponen tersuai.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan model v untuk menyediakan pengikatan dua hala bagi komponen tersuai dan menganalisis prinsip pelaksanaan model v.

Tetapkan model v untuk komponen tersuai

Andaikan kami telah mencipta komponen tersuai yang dipanggil MyInput dan penggunaannya dalam HTML adalah seperti berikut:

<my-input :value="message" @input="message = $event"></my-input>

Ini Komponen menerima nilai atribut sebagai nilainya dan menghantar perubahan nilai kepada komponen induk melalui peristiwa input. Sekarang kita mahu menggunakan sintaks model-v untuk memudahkan penggunaan komponen ini Kita hanya perlu mengikat model-v kepada pembolehubah mesej:

<my-input v-model="message"></my-input>

Dengan cara ini, pembolehubah mesej dalam komponen induk dan Komponen MyInput Atribut nilai akan terikat dua hala.

Jadi, bagaimana kita hendak melaksanakan fungsi ini? Pertama, kita perlu mentakrifkan atribut nilai dalam pilihan props komponen MyInput:

props: {
  value: {
    type: String,
    default: ''
  }
}

Ciri props dalam Vue digunakan di sini Kami mentakrifkan atribut bernama nilai, jenis ialah String dan tetapkan nilai lalai kepada Rentetan kosong.

Seterusnya, kita perlu menambah pendengar acara bernama input kepada komponen MyInput untuk bertindak balas terhadap perubahan nilai dalam komponen induk. Apabila komponen induk mengemas kini atribut nilai, pendengar ini akan dicetuskan:

methods: {
  handleInput(event) {
    this.$emit('input', event.target.value);
  }
}

Kaedah ini menerima objek peristiwa, menghantar peristiwa input kepada komponen induk melalui kaedah $emit dan menghantar nilai terkini pada masa yang sama.

Akhir sekali, dalam templat komponen MyInput, kita perlu mengikat atribut nilai kepada elemen bentuk sebenar dan mendengar acara input:

<template>
  <input :value="value" @input="handleInput">
</template>

Templat ini menggunakan sintaks templat Vue, gunakan : nilai untuk mengikat atribut nilai, panggil kaedah handleInput dalam acara input, dan cetuskan acara input.

Dengan cara ini, kami telah berjaya menyediakan fungsi pengikat dua hala model v untuk komponen tersuai.

Prinsip pelaksanaan model v

Dalam contoh di atas, kami menggunakan model v untuk memudahkan penggunaan komponen tersuai. Walau bagaimanapun, model v sebenarnya adalah gula sintaks, penggunaan lengkapnya ialah: v-model="message" => :value="message" @input="message = $event".

Seperti yang anda lihat, v-model sebenarnya mengikat atribut bernama nilai dan mengemas kini pembolehubah yang sepadan dalam acara input. Proses ini sebenarnya dilengkapkan dengan arahan v-bind dan v-on dalam Vue. Melalui arahan v-bind, kami mengikat atribut nilai kepada mesej pembolehubah melalui arahan v-on, kami mendengar acara input dan menghantar objek $event kepada pembolehubah mesej.

Jadi, bagaimana kita boleh menggunakan model v pada komponen tersuai? Jawapannya juga sangat mudah. ​​Kita hanya perlu menambah atribut bernama model pada komponen dan menetapkannya kepada true:

props: {
  value: {
    type: String,
    default: ''
  }
},
model: {
  prop: 'value',
  event: 'input'
}

Atribut model ini memberitahu Vue bahawa kita ingin menggunakan atribut nilai sebagai atribut bagi v-model nama komponen, dan mengeluarkan peristiwa bernama input dalam acara input. Vue akan mengikat sifat ini secara automatik kepada komponen tersuai, sekali gus merealisasikan pengikatan dua hala model v.

Sudah tentu, untuk komponen tersuai yang lebih kompleks, kami mungkin memerlukan logik tambahan untuk mengendalikan pengikatan model v. Walau bagaimanapun, kod teras Vue telah menyediakan pengkapsulan dan kebolehlanjutan yang baik, membolehkan kami melaksanakan fungsi ini dengan mudah. Bagi pembangun yang baru menggunakan Vue, memahami prinsip pelaksanaan model v juga akan membantu meningkatkan pemahaman mereka tentang rangka kerja Vue.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan model-v untuk menyediakan pengikatan dua hala bagi komponen tersuai, dan menganalisis prinsip pelaksanaan model-v. v-model ialah ciri penting dalam rangka kerja Vue Ia sangat memudahkan interaksi data antara komponen dan menjimatkan banyak kod pembangun. Saya harap artikel ini dapat membantu pemula Vue, dan juga memberikan sedikit inspirasi kepada pembangun yang telah menguasai Vue.

Atas ialah kandungan terperinci vue menetapkan v-model kepada komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!