Vue'de Tek Yönlü Veri Akışı

Tüm prop'lar, alt özellik ile üst özellik arasında tek yönlü bir bağ oluşturur: üst özellik güncellendiğinde, alt bileşene iletilir, ancak tersi olmaz. Bu, alt bileşenlerin üstün durumunu yanlışlıkla değiştirmesini önler, bu da uygulamanızın veri akışını anlamayı zorlaştırabilir.

Ayrıca, üst bileşen her güncellendiğinde, alt bileşenin tüm prop'ları en güncel değerlerle güncellenecektir. Bu, bir prop'u alt bileşenin içinde değiştirmeye çalışmamanız gerektiği anlamına gelir. Eğer yaparsanız, Vue konsolda bir uyarı gösterecektir.

Genellikle, bir prop'u değiştirme cazibesinin ortaya çıktığı iki durumla karşılaşılır. Bunları inceleyelim.

Birinci Durum

Prop, bir başlangıç değeri iletmek için kullanılır; alt bileşen onu daha sonra yerel bir veri özelliği olarak kullanmak ister. Bu durumda, prop'un değerini başlangıç değeri olarak kullanan yerel bir veri özelliği tanımlamak en iyisidir:

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

İkinci Durum

Prop, dönüştürülmesi gereken ham bir değer olarak iletilir. Bu durumda, prop'u kullanarak hesaplanmış bir özellik tanımlamak en iyisidir:

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

Not

JavaScript'teki nesnelerin ve dizilerin referans yoluyla iletildiğini unutmayın, bu nedenle eğer prop bir dizi veya nesne ise, alt bileşenin içindeki bu nesne veya dizide yapılan değişiklikler üstün durumunu etkileyecektir ve Vue bunu sizin için uyaramaz. Tek yönlü veri bağlamayı görmezden gelmek istenmeyen sonuçlara yol açabileceğinden, nesneler ve diziler de dahil olmak üzere herhangi bir prop mutasyonundan kaçınılmalıdır.