Jednokierunkowy przepływ danych w Vue

Wszystkie właściwości (props) tworzą jednokierunkowe powiązanie między właściwością potomka a rodzica: kiedy właściwość rodzica jest aktualizowana - będzie przekazywana potomkowi, ale nie odwrotnie. Zapobiega to przypadkowej zmianie stanu rodzica przez komponenty potomne, co może utrudnić zrozumienie przepływu danych w twojej aplikacji.

Ponadto, za każdym razem, gdy komponent rodzica jest aktualizowany, wszystkie właściwości (props) komponentu potomka zostaną zaktualizowane o aktualne wartości. Oznacza to, że nie powinieneś próbować modyfikować właściwości (prop) wewnątrz komponentu potomnego. Jeśli to zrobisz, Vue wyświetli ostrzeżenie w konsoli.

Zwykle występują dwa przypadki, w których pojawia się pokusa modyfikacji właściwości (prop). Przyjrzyjmy się im.

Przypadek pierwszy

Właściwość (prop) jest używana do przekazania wartości początkowej; komponent potomny chce używać jej jako lokalnej właściwości danych w przyszłości. W tym przypadku najlepiej jest zdefiniować lokalną właściwość w danych, która używa wartości właściwości (prop) jako początkowej:

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

Przypadek drugi

Właściwość (prop) jest przekazywana jako surowa wartość, którą należy przekształcić. W tym przypadku najlepiej jest zdefiniować obliczaną właściwość używając właściwości (prop):

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

Uwaga