Comment utiliser les composants récursifs dans Vue ?

Vue est l'un des frameworks front-end les plus populaires actuellement. Il est facile à utiliser et très flexible. Dans Vue, les composants récursifs sont une technologie très utile qui peut nous aider à utiliser des composants au sein des composants et à éviter les problèmes de transmission de données entre les composants.

Maintenant, examinons de plus près comment utiliser les composants récursifs dans Vue.

1. Que sont les composants récursifs ?

Tout d'abord, nous devons comprendre ce que sont les composants récursifs. Les composants récursifs sont une technique qui permet de se réutiliser de manière répétée au sein d'un composant. Par exemple, il peut y avoir une telle exigence dans un composant : nous devons présenter un ensemble de données structurées en arborescence, et chaque nœud et ses nœuds enfants sont le même composant. À l’heure actuelle, nous pouvons utiliser des composants récursifs pour y parvenir.

2. Comment utiliser les composants récursifs

Dans Vue, il existe deux façons d'utiliser les composants récursifs. Ci-dessous, nous les présentons un par un.

2.1. Utilisez votre propre composant directement

Nous pouvons nous utiliser directement dans le modèle du composant et transmettre les données actuelles via des accessoires pour permettre au composant lui-même d'effectuer une récursion.

Ce qui suit est un exemple d'utilisation d'un composant récursif pour présenter une structure arborescente :

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <TreeNode :node="item" :children="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    list: Array,
  },
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: {
        node: Object,
        children: Array,
      },
      template: `
        <div>
          <div>{{node.title}}</div>
          <Tree v-if="children" :list="children" />
        </div>
      `,
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons créé un composant Tree pour présenter les données de la structure arborescente, et le composant TreeNode est un composant récursif, qui sera lui-même lorsque appel nécessaire.

2.2. Utiliser l'attribut name

En plus d'utiliser directement nos propres composants, nous pouvons également utiliser l'attribut name pour éviter les appels en boucle infinie des composants. En faisant cela, nous pouvons faire du cache Vue une instance pour chaque composant, évitant ainsi des coûts de rendu inutiles.

Nous pouvons écrire une balise personnalisée dans le modèle du composant, puis spécifier le nom de la balise dans l'attribut name du composant. Cela nous oblige à diviser le composant en deux parties : l'une est le composant racine marqué par l'attribut name et l'autre est le composant enfant présenté de manière récursive. Dans le composant enfant, lorsque l'on a besoin de s'utiliser de manière récursive, on peut utiliser directement le nom du composant racine.

Ce qui suit est un exemple d'utilisation de composants récursifs pour présenter une structure arborescente. Semblable à l'exemple ci-dessus, nous utilisons l'attribut name pour éviter les appels en boucle infinie.

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <tree-node :node="item" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    list: Array,
  },
  components: {
    TreeNode: {
      name: 'tree-node',
      props: {
        node: Object,
      },
      template: `
        <div>
          <div>{{node.title}}</div>
          <tree v-if="node.children" :list="node.children" />
        </div>
      `,
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons créé un composant Tree pour présenter des données structurées en arborescence, et le composant TreeNode utilise l'attribut name pour éviter les appels en boucle infinie du composant.

3. Résumé

Ci-dessus, nous avons présenté comment utiliser les composants récursifs dans Vue. Les composants récursifs sont une technologie très flexible qui nous permet de transmettre plus librement les données entre les composants. Il convient de noter que lors de l'utilisation de composants récursifs, vous devez éviter les appels en boucle infinie et essayer d'utiliser l'attribut name pour éviter cette situation.

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!