Aliran Data Sehala dalam Vue

Semua prop membentuk pengikatan sehala antara sifat komponen anak dan induk: apabila sifat induk dikemas kini, ia akan dihantar kepada anak, tetapi tidak sebaliknya. Ini mengelakkan komponen anak secara tidak sengaja mengubah keadaan induk, yang boleh menyukarkan pemahaman aliran data aplikasi anda.

Di samping itu, setiap kali komponen induk dikemas kini, semua prop komponen anak akan dikemas kini dengan nilai-nilai terkini. Ini bermakna anda tidak patut mencuba untuk mengubah suai prop di dalam komponen anak. Jika anda melakukannya, Vue akan memaparkan amaran dalam konsol.

Biasanya terdapat dua kes di mana terdapat godaan untuk mengubah suai prop. Mari kita bincangkannya.

Kes pertama

Prop digunakan untuk menghantar nilai permulaan; komponen anak mahu menggunakannya sebagai sifat data tempatan pada masa hadapan. Dalam kes ini, adalah lebih baik untuk menentukan sifat data tempatan yang menggunakan nilai prop sebagai permulaan:

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

Kes kedua

Prop dihantar sebagai nilai mentalah yang perlu diubah. Dalam kes ini, adalah lebih baik untuk menentukan sifat terkomputer yang menggunakan prop:

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

Nota

Perhatikan bahawa objek dan array dalam JavaScript dihantar melalui rujukan, jadi jika prop adalah array atau objek, maka perubahan di dalam komponen anak terhadap objek atau array tersebut akan mempengaruhi keadaan induk dan Vue tidak dapat memberi amaran tentang ini. Sebarang mutasi terhadap prop harus dielakkan, termasuk objek dan array, kerana mengabaikan pengikatan data sehala boleh membawa kepada hasil yang tidak diingini.