Communication des composants Vue : utilisation des emplacements pour la distribution de contenu

Communication des composants Vue : utiliser des slots pour la distribution de contenu

Avant-propos :
Dans le développement de Vue, la communication des composants est une partie très importante. Vue propose diverses façons de communiquer entre les composants, parmi lesquelles l'utilisation d'emplacements pour la distribution de contenu est un moyen très courant et flexible. Cet article explique comment utiliser les emplacements pour la distribution de contenu de composants et fournit des exemples de code.

1. Qu'est-ce que la machine à sous ?
Dans Vue, slot est une balise spéciale qui peut nous aider à transmettre le contenu des composants parents aux composants enfants. En termes simples, le slot est comme un espace réservé. Nous pouvons placer n'importe quel contenu dans le slot dans le composant parent, le traiter et le restituer dans le composant enfant.

2. Utilisation de base de l'utilisation des slots pour la distribution de contenu

1. Définir les slots dans le composant parent
   Dans le composant parent, nous pouvons utiliser la balise Par exemple, nous avons un composant parent Parent et un composant enfant Child, et nous voulons transmettre un morceau de texte dans Parent to Child :

<template>
  <div>
    <Child>
      <slot></slot>
    </Child>
  </div>
</template>

2. Recevoir le contenu du slot dans le composant enfant
   Dans le composant enfant, nous pouvons utiliser pour recevoir le contenu transmis par le composant parent, le traiter et le restituer. Par exemple, nous recevons le contenu transmis par le composant parent dans le composant Enfant et le restituons :

<template>
  <div>
    <p>子组件：</p>
    <slot></slot>
  </div>
</template>

3. Utilisez des slots avec des noms
Parfois, nous pouvons avoir besoin de définir plusieurs slots dans le même composant et de les définir dans le parent composant Spécifiez un contenu différent. Pour le moment, nous pouvons utiliser des emplacements nommés. Par exemple, nous avons un composant parent Parent et un composant enfant Child. Nous voulons transmettre deux morceaux de texte de Parent à Child et les traiter et les restituer séparément dans Child :

1. Définir un emplacement avec un nom dans le composant parent
   . Dans le composant parent, nous pouvons utiliser la balise pour définir un emplacement nommé. Par exemple, nous avons deux morceaux de texte qui doivent être transmis :

<template>
  <div>
    <Child>
      <template v-slot:text1>
        <p>这是第一段文字。</p>
      </template>
      <template v-slot:text2>
        <p>这是第二段文字。</p>
      </template>
    </Child>
  </div>
</template>

2. Recevoir le contenu de l'emplacement avec le nom dans le sous-composant
   Dans le sous-composant, nous pouvons utiliser le tag Pour recevoir le contenu de l'emplacement nommé, traitez-le et restituez-le. Par exemple :

<template>
  <div>
    <p>子组件：</p>
    <slot name="text1"></slot>
    <slot name="text2"></slot>
  </div>
</template>

4. Utilisez des emplacements de portée
Parfois, nous devons transmettre certaines données du composant parent au composant enfant, puis traiter et rendre en fonction des données du composant enfant. À l’heure actuelle, nous pouvons utiliser les emplacements de portée pour y parvenir. Par exemple, nous avons un composant parent Parent et un composant enfant Child. Nous voulons transmettre une liste dans Parent à Child et la restituer dans Child en fonction de la liste :

1. Définir les emplacements de portée dans le composant parent
   Dans le parent In. le composant, nous pouvons utiliser la balise pour définir un emplacement de portée et transmettre les données au sous-composant. Par exemple, nous avons une liste qui doit être transmise :

<template>
  <div>
    <Child>
      <template v-slot:list="scope">
        <ul>
          <li v-for="item in scope.list">{{ item }}</li>
        </ul>
      </template>
    </Child>
  </div>
</template>

2. Recevoir les données de l'emplacement de portée dans le composant enfant
   Dans le composant enfant, nous pouvons obtenir les données transmises par le composant parent via l'attribut scope de l'emplacement de la lunette. Par exemple :

<template>
  <div>
    <p>子组件：</p>
    <slot :list="list"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
    };
  },
};
</script>

Résumé :
L'utilisation d'emplacements pour la distribution de contenu de composants est un moyen très flexible et puissant de communication entre composants. En définissant des emplacements et en utilisant des emplacements de portée, nous pouvons implémenter le transfert de données et le rendu entre les composants parents et enfants. Dans le développement réel, le choix de l'utilisation appropriée des emplacements en fonction de besoins spécifiques peut améliorer la maintenabilité et la réutilisation du code.

Ce qui précède est la méthode et l'exemple de code d'utilisation des emplacements pour la distribution de contenu. J'espère que cela aide!

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!