Eenrigting Data-vloei in Vue
Alle invoerparameters vorm 'n eenrigting- binding tussen die kinder eienskap en die ouer s'n: wanneer die ouer se eienskap opgedateer word, sal dit na die kind oorgedra word, maar nie andersom nie. Dit verhoed dat kinder komponente per ongeluk die ouer se toestand verander, wat die begrip van die data-vloei van jou toepassing kan bemoeilik.
Daarbenewens sal, elke keer as die ouer- komponent opgedateer word, alle invoerparameters van die kinder- komponent met die mees onlangse waardes opgedateer word. Dit beteken dat jy nie die invoerparameter binne die kinderkomponent moet probeer verander nie. As jy dit doen, sal Vue 'n waarskuwing in die konsole vertoon.
Daar is gewoonlik twee gevalle waar die versoeking ontstaan om 'n invoerparameter te verander. Laat ons hulle ondersoek.
Eerste geval
Die invoerparameter word gebruik om die aanvanklike waarde oor te dra; die kinder komponent wil dit verder as 'n plaaslike data-eienskap gebruik. In hierdie geval is dit die beste om 'n plaaslike data-eienskap te definieer wat die waarde van die invoerparameter as die aanvanklike waarde gebruik:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Tweede geval
Die invoerparameter word oorgedra as 'n rou waarde wat getransformeer moet word. In hierdie geval is dit die beste om 'n berekende eienskap te definieer wat die invoerparameter gebruik:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Nota
Let daarop dat voorwerpe en skikkings in JavaScript by verwysing oorgedra word, dus as die invoerparameter 'n skikking of voorwerp is, sal veranderinge binne die kinderkomponent aan daardie voorwerp of skikking die ouer se toestand beïnvloed en Vue is nie in staat om hiervoor te waarsku nie. Enige mutasies van invoerparameters moet vermy word, insluitend voorwerpe en skikkings, aangesien die ignoreering van eenrigting data-binding kan lei tot ongewenste resultate.
