A quoi sert le slot vue.js ?

Les fonctions du slot vue.js : 1. Afficher les étiquettes et les recevoir via [<slot></slot>] à l'intérieur du composant ; 2. Nommer le slot pour augmenter la flexibilité du slot ; 3. Emplacement avec paramètres, utilisez les données dans l'emplacement pour utiliser les données à l'intérieur du composant.

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

【Articles connexes recommandés : vue.js】

Le rôle du slot vue.js :

1. Utilisation de base

S'il y a d'autres balises imbriquées à l'intérieur de la balise du composant, ces balises ne peuvent pas être affichées. Si vous souhaitez les afficher, utilisez <slot></slot> pour les recevoir à l'intérieur du. composant, et l'emplacement recevra et affichera toutes les balises à la même position

2. Emplacements nommés (emplacements nommés)

Avantages : cela peut augmenter la flexibilité du slot

Ajoutez l'attribut slot à la balise dans la balise du composant. La valeur de l'attribut est le nom de l'emplacement :

<div slot="slotName"></div>

Recevez-le via le nom à l'intérieur du composant :

<slot name="slotName"></slot>

3. Emplacement de domaine de fonction : Emplacement avec paramètres

Lors de l'utilisation de la balise de composant, si vous devez utiliser les données dans l'emplacement pour utiliser les données à l'intérieur du composant, vous devez ajouter :

dans la balise du composant <template scope="props""><div></div></template>, utilisée pour recevoir les données transmises par le composant, via props.val (cet attribut val provient de l'attribut lié au slot à l'intérieur du composant)

Par exemple :

　　<List>
　　　　<template scope="props"><div>{{props.val}}</div></template>
　　</List>

À l'intérieur du composant : slot Propriétés de liaison internes <slot :val="message"></slot>

Recommandations d'apprentissage gratuit associées : JavaScript (vidéo)

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!