Jednokierunkowy przepływ danych w Vue

Wszystkie właściwości (props) tworzą jednokierunkowe powiązanie między właściwością potomka a rodzica: kiedy właściwość rodzica jest aktualizowana - będzie przekazywana potomkowi, ale nie odwrotnie. Zapobiega to przypadkowej zmianie stanu rodzica przez komponenty potomne, co może utrudnić zrozumienie przepływu danych w twojej aplikacji.

Ponadto, za każdym razem, gdy komponent rodzica jest aktualizowany, wszystkie właściwości (props) komponentu potomka zostaną zaktualizowane o aktualne wartości. Oznacza to, że nie powinieneś próbować modyfikować właściwości (prop) wewnątrz komponentu potomnego. Jeśli to zrobisz, Vue wyświetli ostrzeżenie w konsoli.

Zwykle występują dwa przypadki, w których pojawia się pokusa modyfikacji właściwości (prop). Przyjrzyjmy się im.

Przypadek pierwszy

Właściwość (prop) jest używana do przekazania wartości początkowej; komponent potomny chce używać jej jako lokalnej właściwości danych w przyszłości. W tym przypadku najlepiej jest zdefiniować lokalną właściwość w danych, która używa wartości właściwości (prop) jako początkowej:

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

Przypadek drugi

Właściwość (prop) jest przekazywana jako surowa wartość, którą należy przekształcić. W tym przypadku najlepiej jest zdefiniować obliczaną właściwość używając właściwości (prop):

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

Uwaga

Należy pamiętać, że obiekty i tablice w JavaScript są przekazywane przez referencję, więc jeśli właściwość (prop) jest tablicą lub obiektem, to zmiany wewnątrz komponentu potomnego tego obiektu lub tablicy będą wpływać na stan rodzica i Vue nie jest w stanie ostrzec o tym. Należy unikać jakichkolwiek mutacji właściwości (props), w tym obiektów i tablic, ponieważ ignorowanie jednokierunkowego wiązania danych może prowadzić do niepożądanych rezultatów.