Cara terbaik untuk menambahkan v-model ke Custom Component
Jika Anda mencoba membuat component sendiri menggunakan vue.js, pada titik tertentu Anda harus meneruskan data dari component child ke component parent. Ada banyak cara untuk mencapai hasil yang sama. Beberapa developer menggunakan penyimpanan eksternal, beberapa menggunakan objek window dan events custom, dan sebagian besar menggunakan event bus.
Vue.js sudah menyediakan arahan custom untuk pengikatan data dua arah. Untuk mengaktifkan pengikatan data dua arah untuk suatu elemen, cukup gunakan direktif v-model.
Secara internal, ini tidak lebih dari event emitter sederhana yang menggunakan event yang telah ditentukan sebelumnya untuk mengirim data dari child ke parent.
Bagaimana cara kerja v-model?
<input type="text" v-model="message" />
Seperti yang dijelaskan sebelumnya, v-model tidak lain adalah pemancar event emitter. Pada dasarnya Anda melakukan pengikatan data dari parent ke child dengan mengikat prop nilai child. Sesuatu seperti ini:
<input type="text" v-bind:value="message" />
Anda dapat menggunakan :value alih-alih menulis direktif v-bind lengkap.
Untuk menangani pengikatan data child-ke-parent, cukup pancarkan beberapa event dan simpan informasinya di properti yang sama dengan yang Anda gunakan untuk nilainya.
<input type="text" :value="message" @input=" ... " />
Setiap event dapat mengirimkan beberapa data. Jadi, untuk mengisi celah "...", kita memerlukan fungsi yang dapat mengambil data tersebut dan menyimpannya di properti pesan.
Anda dapat menulis fungsi sederhana dalam metode Anda untuk melakukan hal itu.
Data: () => ({
Pesan: "Halo Medium!",
}),
metode: {
menangani masukan(val) {
this.message = val'
},
},
Jadi input asli terlihat seperti ini:
<input type="text" :value="message" @input="handelInput" />
Agar ini tetap singkat dan mudah dibaca, kita dapat menggunakan fungsi panah ES6 untuk menulis ulang semua ini sebagai:
<input type="text" :value="message" @input="val => message = val" />
Pada dasarnya itulah yang dilakukan v-model. Ini mengikat nilai ke properti, listener event input, dan menetapkan nilai properti terikat ke apa pun yang diinputkan.
TL;DR
Cukup tambahkan prop nilai ke component Anda dan keluarkan event input setiap kali prop nilai berubah.
Untuk melakukan ini, lakukan saja:
/* ./components/textInput.vue */<template> <input type="text" v-model="msg" /></template><script>export default {
props: ["value"],
data: () => ({
msg: this.value,
}),
watch: {
msg(newval){
this.$emit("input", newval);
},
},
};</script>
Di component parent Anda dapat menulis:
/* ./views/homeView.vue */<template> <p> {{ message }} </p>
<TextInput v-model="message"></TextInput></template><script>
import TextInput from "../components/textInput.vue";export default {
components:{
TextInput,
},
data: () => ({
message: "hello, medium!",
}),
};</script>
Cara terbaik untuk menambahkan v-model ke custom component
Namun, ini bukan cara terbaik untuk mengimplementasikan v-model dalam custom component. Karena struktur component yang dibangun agar mudah asinkron dari component parent.
Untuk menghindari masalah seperti itu, Anda dapat menggunakan properti ``computed``.
Tidak banyak developer vue.js yang mengetahui atau menggunakannya, tetapi properti yang dihitung dapat berperilaku berbeda berdasarkan cara penanganannya. Dengan kata lain, mereka harus memiliki fungsi yang berbeda untuk mendapatkan nilai dari mereka atau menetapkan nilai untuk mereka.
Dengan properti yang dihitung, component child tidak memiliki status dan tidak dapat asinkron dari parentnya. Satu-satunya cara untuk mengubah data dalam component child adalah dari parentnya.
computed: {
message: {
get() {
return this.value;
},
set(setvalue) {
this.$emit("input", setvalue);
},
},
},
Dalam cuplikan kode ini, pesan mengembalikan nilai saat Anda mencoba mendapatkannya, dan mengaktifkan event input dengan nilai baru saat Anda mencoba mengubahnya. Ini menyebabkan parentnya memperbarui statusnya dan mengubah nilai properti terikat.
Jadi seluruh component terlihat seperti ini:
/* ./components/textInput.vue */<template><input type="text" v-model="msg" /></template><script>export default {
props: ["value"],
computed: {
msg: {
get() {
return this.value;
},
set(setvalue) {
this.$emit("input", setvalue);
},
},
},
};</script>
/* ./views/homeView.vue */<template><p> {{ message }} </p>
<TextInput v-model="message"></TextInput></template><script>
import TextInput from "../components/textInput.vue";export default {
components:{
TextInput,
},
data: () => ({
message: "hello, medium!",
}),
};</script>
Selamat Mencoba :)