Еднопосочен поток от данни във Vue

Всички входни параметри образуват еднопосочно свързване между свойството на дъщерния компонент и това на родителския: когато родителското свойство се актуализира, то ще бъде предадено на дъщерния, но не и обратно. Това предотвратява случайна промяна на родителското състояние от дъщерните компоненти, което може да затрудни разбирането на потока от данни във вашето приложение.

Освен това, всеки път, когато родителският компонент се актуализира, всички входни параметри на дъщерния компонент ще бъдат актуализирани с текущите стойности. Това означава, че не трябва да се опитвате да променяте входен параметър вътре в дъщерния компонент. Ако направите това, Vue ще покаже предупреждение в конзолата.

Обикновено има два случая, които съблазняват да се промени входен параметър. Нека ги разгледаме.

Първи случай

Входният параметър се използва за предаване на начална стойност; дъщерният компонент иска да го използва като локално свойство на данните в бъдеще. В този случай е най-добре да се дефинира локално свойство в данните, което използва стойността на входния параметър като начална:

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

Втори случай

Входният параметър се предава като сурова стойност, която трябва да се трансформира. В този случай е най-добре да се дефинира изчислено свойство, използвайки входния параметър:

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

Забележка

Обърнете внимание, че обектите и масивите в JavaScript се предават по референция, така че ако входният параметър е масив или обект, тогава промени вътре в дъщерния компонент на този обект или масив ще повлияят на състоянието на родителя и Vue не е в състояние да предупреди за това. Трябва да се избягват всякакви мутации на входните параметри, включително на обекти и масиви, тъй като игнорирането на еднопосочното свързване на данни може да доведе до нежелани резултати.