Едностран проток на податоци во Vue
Сите влезни параметри формираат еднострано врзување помеѓу детското својство и родителското: кога родителското својство се ажурира - тоа ќе се пренесува на детето, но не и обратно. Ова спречува случајно менување на родителската состојба од страна на детските компоненти, што може да го отежне разбирањето на протокот на податоци во вашата апликација.
Покрај тоа, секој пат кога се ажурира родителската компонента, сите влезни параметри на детската компонента ќе се ажурираат со актуелните вредности. Ова значи дека не треба да се обидувате да го менувате влезниот параметар внатре во детската компонента. Ако го направите ова, Vue ќе прикаже предупредување во конзолата.
Обично се среќаваат два случаи кога се јавува искушение да се промени влезниот параметар. Ајде да ги разгледаме.
Прв случај
Влезниот параметар се користи за пренос на почетна вредност; детската компонента сака да го користи како локално својство на податоци во иднина. Во овој случај, најдобро е да се дефинира локално својство во податоците кое ја користи вредноста на влезниот параметар како почетна:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Втор случај
Влезниот параметар се пренесува како необработена вредност која треба да се трансформира. Во овој случај, најдобро е да се дефинира пресметано својство кое користи влезен параметар:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Забелешка
Имајте предвид дека објектите и низите во JavaScript се пренесуваат по референца, па затоа ако влезниот параметар е низа или објект, тогаш промените внатре во детската компонента на тој објект или низа ќе влијае на состојбата на родителот и Vue не е во можност да предупреди за ова. Треба да се избегнуваат какви било мутации на влезните параметри, вклучувајќи ги и објектите и низите, бидејќи игнорирањето на едностраното врзување на податоци може да доведе до несакани резултати.
