Exemples de différents types de fonctions de filtre transmises par les composants dans le document Vue

En tant que développeur front-end, nous devons souvent utiliser Vue.js pour créer des pages. Dans Vue.js, les composants constituent une partie très importante. La transmission de valeurs entre composants est une exigence très courante et il existe de nombreuses façons différentes de transmettre des valeurs. Dans cet article, nous nous concentrerons sur le transfert de valeur des composants dans les documents Vue et sur l'utilisation de différents types de fonctions de filtrage.

Transmission de valeurs dans les composants

Dans Vue.js, il existe plusieurs façons de transmettre des valeurs entre les composants :

1. props & submit

Utilisez des accessoires pour transmettre des données des composants parents aux composants enfants. À l'aide d'emit, vous pouvez transmettre les données du composant enfant au composant parent. Cette méthode est souvent utilisée pour la communication bidirectionnelle entre les composants. Et cette méthode est très pratique. Il vous suffit de définir les données qui doivent être transmises dans les accessoires et d'utiliser la méthode $emit dans le sous-composant pour déclencher l'événement.

2. provide & inject

provide & inject est une API ajoutée dans la version Vue.js2.2.0. Utilisez provide pour définir les données qui doivent être transmises et utilisez inject pour injecter ces données dans le composant. Cette méthode est souvent utilisée pour transmettre des données entre les niveaux.

3. $parent & $children

L'arborescence des composants dans Vue.js est un processus de traversée en profondeur. Utilisez $parent pour obtenir l'instance du composant parent et utilisez $children pour obtenir l'instance du composant enfant. L'inconvénient de cette méthode est qu'elle n'est pas assez flexible et n'est pas aussi pratique que les accessoires & émettre et fournir & injecter.

Différents types de fonctions de filtre

Lorsque nous devons filtrer ou transformer des données, nous pouvons utiliser la fonction de filtre dans Vue.js. Les types de fonctions de filtre suivants sont fournis dans Vue.js :

1. Fonction de filtre globale

Les fonctions de filtre globales sont définies via la méthode Vue.filter(). Une fois défini, il peut être utilisé dans n’importe quel composant. L'avantage des fonctions de filtre global est qu'elles sont simples et peuvent être utilisées dans plusieurs composants une fois définies. Cependant, la fonction de filtrage global sera instanciée plusieurs fois, ce qui entraînera de mauvaises performances s'il y a beaucoup de données filtrées.

2. Fonction de filtre local

Les fonctions de filtre local sont définies dans les composants. Il ne peut être utilisé qu'à l'intérieur de ce composant. L'avantage de cette approche est de meilleures performances car elle ne doit être instanciée qu'une seule fois dans le composant. L’inconvénient est qu’il est très limité et ne peut être utilisé qu’au sein du composant.

3. Fonction de filtre à fonction pure

La fonction de filtre à fonction pure fait référence à la saisie de certains paramètres et à la sortie d'un certain résultat, qui ne sera affecté par aucun état externe. Cette méthode est plus pratique à utiliser et peut éviter certains effets secondaires. Cependant, il convient de noter que les fonctions de filtrage de fonctions pures ne peuvent pas modifier les données d'origine.

Exemples de fonctions de filtre

Jetons un coup d'œil à l'utilisation des fonctions de filtre à travers des exemples. Dans cet exemple, nous définissons un composant, transmettons un tableau à ce composant et utilisons la fonction de filtre à l'intérieur du composant pour filtrer le tableau.

<template>
  <div>
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item % 2 === 0
      }).map(item => {
        return item * 2
      })
    }
  }
};
</script>

Ce composant transmet les données d'un tableau et filtre le tableau via la fonction de filtre. Dans l'attribut calculé, nous avons utilisé les méthodes de filtrage et de mappage de JavaScript pour filtrer les nombres pairs du tableau et multiplié les données filtrées par 2. Enfin, nous renvoyons les données filtrées au composant pour affichage.

Résumé

Vue.js fournit une multitude de méthodes de transfert de valeur de composants et de fonctions de filtrage. Nous pouvons choisir différentes méthodes de développement en fonction de différents besoins. Lors de l'utilisation, nous devons prendre en compte de manière globale des facteurs tels que les performances, la flexibilité, la réutilisabilité du code, etc. pour déterminer la meilleure méthode de développement.

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!