Տվյալների միակողմանի հոսք Vue-ում

Բոլոր մուտքային պարամետրերը կազմում են միակողմանի կապը երեխայի հատկության և ծնողի միջև. Երբ ծնողի հատկությունը թարմացվում է, այն կփոխանցվի երեխային, բայց ոչ հակառակը: Սա կանխում է երեխայի կոմպոնենտների կողմից ծնողի վիճակի պատահական փոփոխությունը, ինչը կարող է դժվարացնել ձեր հավելվածի տվյալների հոսքի հասկացողությունը:

Բացի այդ, ամեն անգամ, երբ թարմացվում է ծնող կոմպոնենտը, երեխայի կոմպոնենտի բոլոր մուտքային պարամետրերը կթարմացվեն արդիական արժեքներով: Սա նշանակում է, որ դուք չպետք է փորձեք փոխել մուտքային պարամետրը երեխայի կոմպոնենտի ներսում: Եթե դա անեք, Vue-ն կցուցադրի նախազգուշացում կոնսոլում:

Սովորաբար հանդիպում են երկու դեպք, երբ առաջանում է մուտքային պարամետրը փոխելու գայթակղություն: Եկեք դիտարկենք դրանք:

Առաջին դեպք

Մուտքային պարամետրը օգտագործվում է սկզբնական արժեքը փոխանցելու համար; երեխայի կոմպոնենտը ցանկանում է օգտագործել այն որպես տեղական տվյալների հատկություն հետագայում: Այս դեպքում ամենալավն է սահմանել տեղական տվյալների հատկություն, որն օգտագործում է մուտքային պարամետրի արժեքը որպես սկզբնական:

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

Երկրորդ դեպք

Մուտքային պարամետրը փոխանցվում է որպես անմշակ արժեք, որը պետք է վերափոխել: Այս դեպքում ամենալավն է սահմանել հաշվարկված հատկություն՝ օգտագործելով մուտքային պարամետրը:

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

Ծանոթագրություն