Једносмерни ток података у Vue

Сви пропси (props) формирају једнострану везу између доњег својства и родитељског: када се родитељско својство ажурира - оно ће се проследити доњем, али не и обрнуто. Ово спречава да доњи компоненти случајно мењају стање родитеља, што може отежати разумевање тока података у вашој апликацији.

Поред тога, сваки пут када се родитељски компонент ажурира, сви пропси доњег компонента ће бити ажурирани најновијим вредностима. То значи да не треба да покушавате да мењате prop унутар доњег компонента. Ако то урадите, Vue ће приказати упозорење у конзоли.

Обично се јављају два случаја када се појави искушење да се измени prop. Хајде да их размотримо.

Први случај

Prop се користи за прослеђивање почетне вредности; доњи компонент жели да је користи као локално својство података касније. У овом случају најбоље је дефинисати локално својство у data функцији, које користи вредност пропа као почетну:

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

Други случај

Prop се прослеђује као сирова вредност коју је потребно трансформисати. У овом случају најбоље је дефинисати израчунато својство (computed property) које користи проп:

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

Напомена

Имајте на уму да се објекти и низови у JavaScript-у прослеђују по референци, тако да ако је проп низ или објекат, онда промене унутар доњег компонента тог објекта или низа ће утицати на стање родитеља и Vue не може да упозори на то. Требало би да избегавате било какве мутације пропса, укључујући објекте и низове, јер игнорисање једностраног везивања података може довести до нежељених последица.