Aliran Data Satu Arah di Vue
Semua props membentuk binding satu arah antara properti anak dan induk: ketika properti induk diperbarui - itu akan diteruskan ke anak, tetapi tidak sebaliknya. Ini mencegah perubahan tidak sengaja pada state induk oleh komponen anak, yang dapat menyulitkan pemahaman aliran data aplikasi Anda.
Selain itu, setiap kali komponen induk diperbarui, semua props dari komponen anak akan diperbarui dengan nilai-nilai terkini. Ini berarti bahwa Anda tidak boleh mencoba mengubah prop di dalam komponen anak. Jika Anda melakukannya, Vue akan menampilkan peringatan di konsol.
Biasanya ada dua kasus yang sering ditemui ketika timbul godaan untuk mengubah prop. Mari kita bahas.
Kasus pertama
Prop digunakan untuk meneruskan nilai awal; komponen anak ingin menggunakannya sebagai properti data lokal selanjutnya. Dalam kasus ini, yang terbaik adalah mendefinisikan properti data lokal yang menggunakan nilai prop sebagai nilai awal:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Kasus kedua
Prop diteruskan sebagai nilai mentah yang perlu diubah. Dalam kasus ini, yang terbaik adalah mendefinisikan properti terkomputasi menggunakan nilai prop:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Catatan
Perhatikan bahwa objek dan array dalam JavaScript diteruskan oleh referensi, jadi jika prop adalah array atau objek, maka perubahan di dalam komponen anak pada objek atau array tersebut akan mempengaruhi state induk dan Vue tidak dapat memperingatkan tentang hal ini. Setiap mutasi pada props harus dihindari, termasuk objek dan array, karena mengabaikan one-way data binding dapat menyebabkan hasil yang tidak diinginkan.
