Démarrage rapide de VUE3 : Utilisation des emplacements pour la distribution des emplacements

Vue3 est un framework JavaScript très populaire, apprécié en raison de sa facilité d'utilisation et de sa flexibilité. Dans Vue3, l'utilisation d'emplacements pour la distribution des emplacements permet aux utilisateurs de personnaliser les composants de manière plus flexible. Cet article vous expliquera comment utiliser les slots pour la distribution de slots et démarrer rapidement avec Vue3.

1. Qu'est-ce que la distribution de slots

La distribution de slots est une fonction intégrée du composant dans Vue3, qui permet aux utilisateurs de transmettre tout type de contenu via le composant pour obtenir différents niveaux de rendu au sein du composant. En bref, la distribution des slots est appliquée aux composants, vous permettant de distribuer le contenu du composant de la manière suivante : les utilisateurs peuvent insérer du contenu dans l'emplacement du composant Vue3 sans avoir besoin de connaître les détails d'implémentation du composant. En utilisant la distribution des emplacements, les développeurs peuvent avoir un contrôle plus flexible sur la présentation et le comportement d'interaction des composants.

2. Comment utiliser la distribution de slots

Tout d'abord, avant d'utiliser la distribution de slots, vous devez définir un composant Vue3. Supposons que nous devions implémenter une page avec un titre et un texte. Les fonctions suivantes peuvent être obtenues en utilisant la distribution par emplacements :

1. Les utilisateurs peuvent définir les positions du titre et du texte.
2. La position par défaut du texte est sous le titre.

Le code pour définir un composant Vue3 est le suivant :

<template>
    <div>
        <h1>组件名称</h1>
        <slot name="caption"></slot>
        <p>默认文本</p>
        <slot name="text"></slot>
    </div>
</template>

Dans le code ci-dessus, nous définissons un titre nommé "Component Name" et utilisons deux balises de type slot. Une balise d'emplacement pointe vers l'emplacement d'emplacement nommé « légende », tandis que l'autre balise d'emplacement pointe vers l'emplacement d'emplacement nommé « texte ».

Ensuite, vous pouvez effectuer la distribution de slots en utilisant ce composant et en fournissant du contenu pour la balise slot. Par exemple :

<template>
    <div>
        <MyComponent>
            <template v-slot:caption>
                <h2>自定义标题</h2>
            </template>
            <template v-slot:text>
                <p>文本内容</p>
            </template>
        </MyComponent>
    </div>
</template>

Dans le code ci-dessus, nous avons attribué respectivement "Je suis une légende" et "Je suis un texte" aux balises slot des composants ci-dessus.

3. Conseils avancés pour l'utilisation des slots

1. Slot par défaut

Le slot par défaut fait référence à un slot sans nom spécifié. Il transmettra tout contenu transmis par le composant Vue3 parent au composant enfant à cet emplacement. Par exemple, pour appliquer un emplacement par défaut dans un composant, incluez le contenu dans le balisage. Un exemple de code est le suivant :

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

Cela transmet l'adresse à tout ce qui se trouve dans le composant, comme le code ci-dessous :

<template>
    <div>
        <MyComponent>
            <p>文本内容</p>
            <h2>自定义标题</h2>
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
            </ul>
        </MyComponent>
    </div>
</template>

2. Emplacements nommés

Un emplacement nommé est un emplacement dans lequel vous pouvez spécifier le contenu par son nom. Les emplacements par défaut utilisent des noms par défaut, sauf indication contraire. Utilisez des emplacements nommés pour utiliser plusieurs emplacements dans le même composant et sélectionnez un emplacement spécifique en fonction de son nom. Par exemple, pour utiliser un emplacement nommé dans un composant, ajoutez l'attribut "name" à la balise slot, l'exemple de code est le suivant :

<template>
    <div>
        <h1>组件名称</h1>
        <slot name="header"></slot>
        <p>默认文本</p>
        <slot name="footer"></slot>
    </div>
</template>

Ensuite, lors de l'attribution du composant enfant dans l'application, vous pouvez comparer l'emplacement de l'emplacement avec le contenu des données basé sur le nom En conséquence, l'exemple de code est le suivant :

<template>
    <div>
        <MyComponent>
            <template v-slot:header>
                <h2>自定义标题</h2>
            </template>
            <template v-slot:footer>
                <h4>自定义页脚</h4>
            </template>
        </MyComponent>
    </div>
</template>

3. Slots de portée

Un emplacement de portée est un emplacement dans lequel vous pouvez transmettre des données contextuelles à d'autres composants Vue3. Par exemple, pour utiliser des emplacements limités dans un composant, ajoutez un paramètre à la balise d'emplacement, tel que « slot-scope ». L'exemple de code est le suivant :

<template>
    <div>
        <ul>
            <li v-for="{{ menuItem in menuItems }}">
                <slot name="item" v-bind="menuItem"></slot>
            </li>
        </ul>
    </div>
</template>

Ensuite, lors de l'attribution du composant enfant, vous pouvez ajouter un slot nommé "item" dans le modèle comme suit :

<template>
    <div>
        <Menu>
            <template v-slot:item="menuItem">
                <li>{{ menuItem.text }}</li>
            </template>
        </Menu>
    </div>
</template>

Dans l'exemple ci-dessus, "menuItem" est le slot passé au slot L'objet contextuel du slot, qui contient toutes les données transmises avec le composant. Vous pouvez faire référence à n'importe quelle propriété par son nom, par exemple "menuItem.text".

Résumé

Dans Vue3, l'utilisation de la distribution des emplacements permet aux utilisateurs de personnaliser les composants de manière plus flexible. Une personnalisation puissante peut être obtenue en utilisant trois méthodes de distribution des emplacements : les emplacements par défaut, les emplacements nommés et les emplacements de portée. Cet article explique comment utiliser la distribution des slots et les techniques avancées d'utilisation des slots. J'espère qu'il pourra vous aider à démarrer rapidement avec Vue3 et à commencer à créer des applications Web dynamiques et flexibles.

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!