Vue explication détaillée des emplacements pour augmenter l'évolutivité des composants

Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement les problèmes liés aux emplacements qui augmentent l'évolutivité des composants. Les emplacements des composants visent également à rendre les composants que nous encapsulons plus évolutifs, permettant aux utilisateurs de décider quel contenu. à l'intérieur du composant sera affiché. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

【Recommandations associées : tutoriel vidéo javascript, tutoriel vue.js】

emplacement de composant

emplacement de composant

• l'emplacement de composant est également pour nous Encaps les composants ulés sont plus évolutifs .

• Permet aux utilisateurs de décider quel contenu à l'intérieur du composant doit être affiché.

Comment encapsuler de tels composants ? slot

Ils ont aussi de nombreuses différences, mais ils ont aussi de nombreux points communs.

Si nous encapsulons un composant individuellement, c'est évidemment inapproprié : par exemple, si chaque page est renvoyée, nous devrons encapsuler cette partie du contenu à plusieurs reprises.
Cependant, cela semble déraisonnable si nous les encapsulons en un seul : certains sont des menus à gauche, certains sont des retours, certains sont des recherches au milieu, certains sont du texte, etc.

Comment bien l'emballer ?

Extraire les points communs et conserver les différences.

La meilleure façon d'encapsuler est d'extraire les points communs dans les composants et d'exposer les différents sous forme d'emplacements. Une fois le slot réservé, l'utilisateur peut décider quel contenu insérer dans le slot en fonction de ses propres besoins. S'agit-il d'un champ de recherche, d'un texte ou d'un menu. C'est à l'appelant de décider.
Utilisation de base du slot

Dans un sous-composant, vous pouvez utiliser des éléments spéciaux pour ouvrir un slot pour le sous-composant.

Ce qui est inséré dans cet emplacement dépend de la façon dont le composant parent est utilisé.

• Utilisez un exemple simple pour définir un slot pour un sous-composant : Le contenu dans
• <slot></slot> signifie que si aucun autre contenu n'est inséré dans le composant, il sera affiché par défaut . Contenu

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮</button></cpn>
        <cpn><span>aaaaa</span></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

Insert nommé Slot<slot></slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮1</button></cpn>
        <cpn><span>aaaaa</span>
            <button>按钮2</button></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

具名插槽 slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

如何使用具名插槽呢？

• 只要给slot元素一个name属性即可
• <slot name="'myslot'"></slot>

<div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>

作用域插槽

实质：

父组件替换插槽的标签，但是内容由子组件来提供。

需求：

子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：

• 某些界面是以水平方向一一展示的
• 某些界面是以列表形式展示的
• 某些界面直接展示一个数组

内容在子组件，希望在父组件中展示：

• 利用slot作用域插槽

在父组件使用我们的子组件时，从子组件中拿到数据：

• 通过<template slot-scope="slotProps"></template>获取到slotProps属性
• 通过slotProps.data

Lorsque la fonction du sous-composant est complexe, l'emplacement

du sous-composant peut ne pas en être un .

Par exemple, si nous encapsulons un sous-composant d'une barre de navigation, nous pouvons avoir besoin de trois emplacements, représentant respectivement la gauche, le milieu et la droite. Alors, lors de l’insertion de contenu dans le slot, comment distinguer lequel est inséré ? Comment utiliser les emplacements nommés ?

Donnez simplement à l'élément slot un attribut de nom🎜🎜<slot name="myslot"></slot>🎜🎜

<template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

🎜🎜Scope slot🎜🎜

Essence : 🎜🎜Le composant parent remplace le label du slot, mais le contenu est fourni par le composant enfant🎜. 🎜

Exigences :

🎜Le sous-composant comprend un ensemble de données, telles que : pLangues : ['JavaScript', 'Python', 'Swift', 'Go', 'C++'] code >🎜 Doit être affiché sur plusieurs interfaces : 🎜🎜🎜Certaines interfaces sont affichées une à une dans le sens horizontal🎜🎜Certaines interfaces sont affichées sous forme de liste🎜🎜Certaines interfaces affichent directement un tableau🎜🎜🎜Le contenu est dans le sous-composant, j'espère être affiché dans le composant parent : 🎜🎜🎜🎜Utilisez l'emplacement de portée du slot 🎜🎜🎜🎜Lorsque le composant parent utilise notre composant enfant, récupérez les données du composant enfant : 🎜🎜🎜via <code> Obtenez l'attribut slotProps🎜🎜Vous pouvez obtenir les données que nous venons de transmettre via slotProps.data🎜🎜

nbsp;html>



    
    
    
    <script></script>



    <div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>
    <template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

rrreee🎜🎜🎜rrreee🎜 [Recommandations associées : 🎜Tutoriel vidéo javascript🎜, 🎜Tutoriel vue.js🎜]🎜

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!