Une brève discussion sur les accessoires (flux de données unidirectionnel) dans vue.js

prop est une liaison unidirectionnelle : lorsque les propriétés du composant parent changent, elle sera transmise au composant enfant, mais pas l'inverse. Cela permet d'éviter que les composants enfants ne modifient par inadvertance l'état du composant parent, ce qui rendrait le flux de données de l'application difficile à comprendre.

De plus, chaque fois que le composant parent est mis à jour, tous les accessoires du composant enfant seront mis à jour avec les dernières valeurs. Cela signifie que vous ne devez pas modifier les accessoires à l'intérieur des composants enfants. Si vous faites cela, Vue vous avertira dans la console.

Il existe généralement deux cas de changement de prop :

1. prop est transmis comme valeur initiale, et le sous-composant utilise simplement sa valeur initiale comme valeur initiale du local data ;

2. prop est transmis comme valeur d'origine qui doit être transformée.

Plus précisément, ces deux situations sont :

1. Définir un attribut de données locales et utiliser la valeur initiale de prop comme valeur initiale des données locales.

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

2. Définissez un attribut calculé, qui est calculé à partir de la valeur de prop.

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

Notez que les objets et les tableaux sont des types de référence en JavaScript et pointent vers le même espace mémoire. Si prop est un objet ou un tableau, sa modification à l'intérieur du composant enfant affectera l'état du composant parent.

Adresse originale en anglais : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Recommandations associées :

Un résumé des questions d'entretien Vue frontale en 2020 (avec réponses)

Recommandations du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!