Vue-тегі деректердің бірбағытты ағыны

Барлық кіріс параметрлері балалық қасиет пен аталық қасиет арасында бір жақты байланыс құрады: аталық қасиет жаңартылған кезде - ол балалыққа беріледі, бірақ керісінше емес. Бұл балалық компоненттердің кездейсоқ өзгеруін болдырмайды аталық күйі, бұл түсінуді қиындата алады сіздің қолданбаңыздың деректер ағыны.

Сонымен қатар, әр жолы аталық компонент жаңартылған кезде, балалық компоненттің барлық кіріс параметрлері ең өзекті мәндермен жаңартылады. Бұл сіз кіріс параметрін өзгертуге тырыспауыңыз керек балалық компонент ішінде дегенді білдіреді. Егер сіз мұны жасасаңыз, Vue консольде ескерту көрсетеді.

Әдетте кіріс параметрін өзгертуге ынталандыратын екі жағдай кездеседі. Оларды қарастырайық.

Бірінші жағдай

Кіріс параметрі бастапқы мәнді беру үшін пайдаланылады; балалық компонент оны жергілікті деректер қасиеті ретінде пайдаланғысы келеді. Бұл жағдайда ең жақсы шешім деректерде жергілікті қасиетті анықтау, ол бастапқы мән ретінде кіріс параметрінің мәнін пайдаланады:

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

Екінші жағдай

Кіріс параметрі өңделмеген мән ретінде беріледі, оны түрлендіру қажет. Бұл жағдайда ең жақсы шешім есептелетін қасиетті кіріс параметрін пайдаланып анықтау:

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

Ескерту

Назар аударыңыз, JavaScript-тегі объектілер мен массивтер сілтеме бойынша берілетіндіктен, егер кіріс параметрі массив немесе объект болса, онда балалық компоненттегі сол объектінің немесе массивтің өзгерістері аталықтың күйіне әсер етеді және Vue бұл туралы ескерте алмайды. Кіріс параметрлерінің кез келген мутацияларынан сақтану керек, соның ішінде объектілер мен массивтер де, өйткені деректердің біржақты байланысын елемеу қалаған нәтижелерге әкелуі мүмкін.