Solutions aux problèmes de flux de données des composants dans vue.js

Cet article présente principalement les problèmes liés au flux de données des composants vue.js. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

1. Composants

Les composants peuvent être considérés comme un élément essentiel du front-end moderne cadre . L'utilisation de composants peut non seulement améliorer considérablement le taux de réutilisation du code et l'efficacité du développement des développeurs, mais revêt également une grande importance pour la maintenance ultérieure du code. Dans le développement front-end, pour des raisons historiques, bien que WebComponent soit facile à utiliser, son développement est considérablement limité, comme de nombreuses technologies front-end émergentes, il est hors de portée. Sur la base de cette situation, les développeurs intelligents tentent de compléter la composition en intégrant les fonctions correspondantes dans le cadre. Divers cadres frontaux modernes ont essentiellement leurs propres implémentations. Ici, nous analysons les composants de vue, en nous concentrant sur le flux de données.

2. Composants Vue

Les composants Vue sont basés sur du HTML ordinaire lors de la création de modèles, et il n'est pas nécessaire d'apprendre jsx, handlebars, etc. syntaxe spéciale, donc relativement parlant, le coût d'apprentissage est relativement faible et il est plus facile de démarrer. Lors de l'utilisation de composants vue, elle est généralement divisée en deux parties : l'enregistrement du composant et l'invocation du composant.

(1) Enregistrement des composants

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

En utilisant la méthode Vue.component, nous pouvons facilement créer un composant disponible mondialement, bien sûr, on peut également enregistrer des composants locaux à l'intérieur d'instances ou de composants, mais les principes sont similaires. Le premier paramètre de Vue.component est le nom du composant, ou l'identifiant unique (id). Les appels suivants utiliseront ce nom pour l'appeler, le deuxième paramètre est un objet, qui contient généralement le modèle (template), la clé du composant ; des informations telles que les données (données, calculées), les méthodes (méthodes), les fonctions de hook (créées, montées...) conservées à l'intérieur.

Il convient de noter :

1. Les données du composant doivent être une fonction, et sa valeur de retour sera utilisée comme "données" réelles ;

2. Les fonctions hook de vue1.x et vue2.x sont légèrement différentes. Si vous constatez que la fonction hook ne prend pas effet, n'oubliez pas de confirmer la version de vue.

(2) Appel de composant

(1) Mode balise de début + balise de fin

<pop-box text="200" v-bind:number="200"></pop-box>

(2) Mode sans balise de fin

<pop-box text="200" v-bind:number="200" />

Il existe les deux modes ci-dessus pour appeler les composants vue. Il n'y a en fait aucune différence entre les deux modes si slot n'est pas utilisé, mais si vous devez utiliser slot, vous ne pouvez utiliser que le mode qui contient à la fois la balise de début et la balise de fin.

Il convient de noter que lors de la liaison des données ci-dessus, la forme de property="value" est directement utilisée. Que la valeur soit un nombre ou une chaîne, la propriété est finalement un type de chaîne. . Si vous souhaitez qu'il s'agisse d'un type numérique, utilisez le formulaire v-bind:property="value", ou abrégé en :property="value".

3. Flux de données des composants Vue

vue suit le principe du flux de données unidirectionnel typique, c'est-à-dire que les données sont toujours transmises. le composant parent En ce qui concerne les composants enfants, le composant enfant peut avoir ses propres données conservées à l'intérieur, mais il n'a pas le droit de modifier les données qui lui sont transmises par le composant parent. Lorsque les développeurs tentent de le faire, Vue le fera. signaler une erreur. L'avantage est d'empêcher plusieurs composants enfants de tenter de modifier l'état du composant parent, ce qui rend ce comportement difficile à retracer. La méthode d'implémentation spécifique dans vue est la suivante :

Le composant parent transmet les données au composant enfant en liant des accessoires, mais le composant enfant lui-même n'a pas le droit de les modifier Si vous souhaitez modifier les données, vous ne pouvez signaler la modification au composant parent que via un événement, et le composant parent lui-même décide comment traiter les données.

(1) Exemple simple

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

Afin de faire plus simple, un seul composant my-counter est créé en tant que composant enfant, nous pouvons temporairement considérer l'instance de vue comme un composant parent.

(2) Analyse de l'analyse des flux de données

(1) On définit une donnée appelée compteur dans le composant parent ;
(2) Lors de l'appel du composant, passer le compteur du composant parent à la prop sous la forme :counter="counter" Dans le sous-composant ;
(3) Le sous-composant lit le compteur et l'affiche dans le modèle
(4) Lorsque l'utilisateur clique sur le bouton, le compteur doit être augmenté
(5) Le sous-composant écoute ; cet événement, mais il ne modifie pas directement le compteur, mais signale l'événement qui doit être ajouté au composant parent sous la forme d'un événement personnalisé via this.$emit('inc'); composant , car en exécutant @inc="increase", vous pouvez surveiller les événements signalés par le composant enfant et augmenter le compteur dans votre propre méthode d'augmentation
(7) Les données du composant parent sont mises à jour, Les données ; dans le sous-composant sera également automatiquement mis à jour, et le contenu de l'interface sera également mis à jour. Ce processus est automatiquement complété par le framework.

(3) Résumé

L'exemple ci-dessus démontre fondamentalement entièrement le flux de données principal de vue, mais cette méthode basée sur prop/evnet uniquement Elle convient pour les composants avec une relation parent-enfant directe. Si le flux de données de composants frères ou d'un grand nombre de composants est basé sur cette méthode, cela deviendra très gênant. Dans ce cas, vous pouvez envisager d'utiliser un mode de gestion d'état plus puissant.

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!