Méthode d'implémentation de la fonction de transfert de valeur interne du slot dans la documentation Vue

Vue est un framework JavaScript open source pour créer des interfaces Web. Une fonctionnalité importante de Vue est l'utilisation de slots, qui peuvent facilement implémenter des fonctions telles que la communication entre les composants et la diffusion d'événements. Cet article expliquera comment implémenter la fonction de transfert de valeur à l'intérieur du slot sur la base de l'introduction des slots Vue.

Bases des slots Vue

Les slots dans Vue sont un mécanisme permettant de transmettre le contenu des composants parents aux composants enfants. Cela nous permet de définir du contenu dans le composant parent et d'utiliser ce contenu dans le composant enfant. Les emplacements dans Vue peuvent être divisés en emplacements nommés et en emplacements par défaut.

Plusieurs emplacements nommés peuvent être définis et référencés par leur nom. Voici un exemple d'emplacement nommé :

<template>
  <div>
    <slot name="header"></slot>
    <div>
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

Dans l'exemple ci-dessus, nous avons défini trois emplacements, la tête et la queue sont des emplacements nommés, et celui sans nom est l'emplacement par défaut.

Lors de l'utilisation de ce composant dans le composant parent, nous pouvons transmettre du contenu à ces slots :

<template>
  <my-component>
    <template v-slot:header>
      <h1>This is header</h1>
    </template>
    <p>This is content.</p>
    <template v-slot:footer>
      <h1>This is footer</h1>
    </template>
  </my-component>
</template>

Dans l'exemple ci-dessus, nous avons utilisé la directive v-slot pour transmettre du contenu au slot. Nous devons spécifier le nom du slot, ici nous utilisons la méthode d'écriture du slot nommé.

Valeur de transmission du slot Vue

Le slot de Vue peut être utilisé pour transmettre des données, comme dans l'exemple suivant :

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

Dans l'exemple ci-dessus, nous utilisons une variable nommée message et la transmettons au slot .

Dans le composant parent, nous pouvons utiliser le slot comme ceci :

<template>
  <my-component>
    <template v-slot="slotProps">
      <div>{{ slotProps.message }}</div>
    </template>
  </my-component>
</template>

Dans l'exemple ci-dessus, nous avons utilisé la méthode d'écriture par défaut de v-slot et attribué le contenu du slot à la variable slotProps. Ensuite, nous rendons la valeur de cette variable dans le slot.

Implémentez la fonction de transmission de valeur à l'intérieur de l'emplacement

Parfois, nous devons définir une fonction de transmission de valeur à l'intérieur de l'emplacement pour implémenter des fonctions plus complexes. Par exemple, nous pouvons définir une fonction qui gère les données passées dans le slot :

function handleMessage(message) {
  // 处理消息
}

Nous devons définir cette fonction dans le slot et la transmettre au composant enfant. Voici un exemple :

<template>
  <div>
    <slot :handle-message="handleMessage"></slot>
  </div>
</template>

Dans l'exemple ci-dessus, nous avons ajouté une fonction appelée handleMessage et l'avons transmise au slot.

Ensuite, nous utilisons le slot dans le composant parent :

<template>
  <my-component>
    <template v-slot="slotProps">
      <button @click="slotProps.handleMessage('This is a message.')">Click me</button>
    </template>
  </my-component>
</template>

Dans l'exemple ci-dessus, nous avons rendu un bouton dans le slot et lié un événement de clic. Lorsque nous cliquons sur ce bouton, un message sera transmis à la fonction handleMessage.

Enfin, nous devons définir l'emplacement dans le composant enfant et appeler la fonction passée :

<template>
  <div>
    <slot :message="message" :handle-message="handleMessage"></slot>
  </div>
</template>

Dans l'exemple ci-dessus, nous avons attribué le message et la fonction dans l'emplacement aux variables message et handleMessage respectivement. On peut alors appeler cette fonction dans le composant enfant :

mounted() {
  this.$slots.default[0].context.handleMessage('This is a message.');
},

Dans l'exemple ci-dessus, nous avons utilisé l'attribut $slots pour récupérer le contenu des slots. Ensuite, nous avons appelé la fonction handleMessage et transmis un message.

Résumé

Dans Vue, les slots sont un mécanisme très utile qui peut facilement implémenter la communication et le transfert de données entre les composants. Nous pouvons transmettre des données et des fonctions dans des emplacements et interagir avec elles dans les composants parents et enfants. Pour l'implémentation de la fonction de transmission de valeur à l'intérieur du slot, nous devons définir une fonction pour traiter les données et les transmettre au slot. Appelez ensuite cette fonction dans le sous-composant pour terminer la fonction de traitement des données.

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!