Il y a plusieurs slots en vue

Il existe 3 types d'emplacements dans vue : 1. Emplacement par défaut, syntaxe "58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee" 2. Emplacement nommé, syntaxe "d34e96e0131a1ff4a158a95223ce35108fc6f306995ef06bd5f901fbcc64ee1a7971cf77a46923278913ee247bc958ee".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Les slots de vue sont principalement divisés en trois types :

Slot par défaut, nommé slot, scope slot

Le slot en vue fait référence au sous-composant fourni à Un espace réservé utilisé par le composant parent
; est représenté par une étiquette. Le composant parent peut remplir cet espace réservé avec n'importe quel code de modèle, tel que HTML, composants, etc., et le contenu rempli remplacera l'étiquette du composant enfant (remplacera l'espace réservé) .

Emplacement par défaut

L'emplacement par défaut est le type d'emplacement le plus simple. Conformément à la description ci-dessus, il obtient l'effet de modifier le contenu du composant enfant dans le composant parent en remplaçant l'espace réservé.

Syntaxe : 58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee

在子组件中放置一个占位符（slot）：

<template>
    <span>
        <span>莎莎减肥</span>
        <slot></slot>
    </span>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

然后在父组件中引用这个子组件，并给这个占位符（slot）填充内容：

<template>
    <div>
        <span>今天吃啥：</span>
        <chassList>
            <span>大嫂不让莎莎吃饭</span>
        </chassList>
    </div>
</template>

这时页面展现的内容会是【今天吃啥：莎莎减肥大嫂不让莎莎吃饭】。

具名插槽

比如在子组件中有两个要替换占位符的地方（两个slot），这时父组件如果要将相应的内容填充到相应的插槽中，靠默认插槽是没有办法判断相应的内容要填充到哪个插槽中的。为了应对这样的场景，具名插槽应运而生。

具名插槽，其实就是给子组件中的插槽取一个名字，而父组件就可以在引用子组件的时候，根据这个名字对号入座，将相应内容填充到相应的插槽中。

语法：12df492d3a1458f5c89c03526ce525947971cf77a46923278913ee247bc958ee

在子组件中放置两个具名插槽：

<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

在父组件中引用该子组件，并通过v-slot:[name]的方式将相应的内容填充到相应的插槽中：

<template>
    <div>
        <span>两个插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

这时页面展示的内容会是【两个插槽：第一个插槽one，第二个插槽two】。

使用默认插槽和具名插槽的注意事项

1.如果子组件中存在多个默认插槽，那么父组件中所有指定到默认插槽的填充内容（未指定具名插槽），会全部填充到子组件的每个默认插槽中。

2.即使在父组件中将具名插槽的填充顺序打乱，只要具名插槽的名字对应上了，填充的内容就能被正确渲染到相应的具名插槽中，一个萝卜一个坑。

3.如果子组件中同时存在默认插槽和具名插槽，但是在子组件中找不到父组件中指定的具名插槽，那么该内容会被直接丢弃，而不会被填充到默认插槽中。

作用域插槽

作用域插槽相比于前面的默认插槽和具名插槽，会比较难于理解和运用。

• 前面的两个插槽强调的是填充占位的【位置】；

• 作用域插槽强调的则是数据作用的【范围】；

• 作用域插槽，就是带参数（数据）的插槽；

在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。

语法：cf5830709e2d2851e6765d2c45bca81f7971cf77a46923278913ee247bc958ee

Placez un espace réservé (slot) dans le composant enfant :

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;classList&#39;,
    data() {
        return {
            isAllwo: {
                one: &#39;one&#39;,
                two: &#39;two&#39;
            }　　
        }
    }
}
</script>

Référez ensuite ce composant enfant dans le composant parent et donnez le contenu de cet espace réservé (emplacement) est :

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

À ce moment, le contenu affiché sur la page sera [Que manger aujourd'hui : la belle-sœur de Sasha qui perd du poids ne laissera pas Sasha manger].

Emplacement nommé

Par exemple, s'il y a deux endroits où les espaces réservés doivent être remplacés (deux emplacements) dans le composant enfant, alors si le composant parent souhaite remplir le contenu correspondant dans l'emplacement correspondant, là Il n'existe aucun moyen de déterminer dans quel emplacement le contenu correspondant doit être rempli en fonction de l'emplacement par défaut. Afin de faire face à de tels scénarios, des machines à sous nommées ont vu le jour.

L'emplacement nommé consiste en fait à donner un nom à l'emplacement dans le composant enfant, et le composant parent peut remplir le contenu correspondant dans l'emplacement correspondant en fonction de ce nom lors du référencement du composant enfant. Syntaxe : d34e96e0131a1ff4a158a95223ce35107971cf77a46923278913ee247bc958ee

🎜Placez deux emplacements nommés dans le composant enfant : 🎜

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| &#39;空值&#39; }}
            </template>
        </classList>
    </div>
</template>

🎜Référencez le composant enfant dans le composant parent, et remplissez le contenu correspondant dans l'emplacement correspondant via v-slot :[nom] : 🎜rrreee🎜À ce moment, le contenu affiché sur la page sera [deux emplacements : le premier emplacement un, le deuxième emplacement deux]. 🎜🎜🎜Remarques sur l'utilisation des emplacements par défaut et des emplacements nommés🎜🎜🎜1. S'il existe plusieurs emplacements par défaut dans le composant enfant, alors tout le contenu de remplissage attribué à l'emplacement par défaut dans le composant parent (aucun emplacement nommé n'est spécifié) le sera. être entièrement renseigné dans chaque emplacement par défaut du composant enfant. 🎜🎜2. Même si l'ordre de remplissage des emplacements nommés est perturbé dans le composant parent, tant que les noms des emplacements nommés correspondent, le contenu rempli peut être correctement restitué dans les emplacements nommés correspondants, une carotte et un puits. 🎜🎜3. S'il y a à la fois des emplacements par défaut et des emplacements nommés dans le composant enfant, mais que l'emplacement nommé spécifié dans le composant parent est introuvable dans le composant enfant, alors le contenu sera supprimé directement sans être rempli par défaut dans le composant enfant. fente. 🎜🎜🎜🎜Slots Scope🎜🎜🎜🎜Les emplacements Scope sont plus difficiles à comprendre et à utiliser que les emplacements par défaut et les emplacements nommés précédents. 🎜

• 🎜Les deux premiers emplacements mettent l'accent sur la [position] du remplissage des espaces réservés 🎜
• 🎜Emplacements de portée L'accent est mis sur [ ; scope] des données ; 🎜
• 🎜Les slots de portée sont des slots avec des paramètres (données) 🎜

🎜Dans l'insertion de sous-composants Les paramètres (données) introduits dans le slot sont fournis au composant parent. Ce paramètre (données) n'est valide que dans le slot. Le composant parent peut personnaliser le contenu d'affichage en fonction des paramètres de slot (données) transmis par le composant enfant. 🎜🎜Syntaxe : 2598c0b37a208c3422888347beb61e027971cf77a46923278913ee247bc958ee🎜🎜Placer un emplacement avec des paramètres (données) dans le composant enfant : 🎜 rrreee🎜Référencer le sous-composant dans le composant parent, et utilisez slot-scope pour accepter les paramètres transmis dans l'emplacement du sous-composant et utiliser les données. 🎜rrreee🎜À ce moment, le contenu affiché sur la page sera [scope slot : la valeur du paramètre dans l'emplacement est un]. 🎜🎜Étant donné que {🎜{}} dans le modèle prend en charge les expressions, vous pouvez actuellement utiliser les différentes valeurs de paramètres transmises par le sous-composant pour personnaliser le contenu de la page. 🎜rrreee🎜À ce moment, si le paramètre passé dans le sous-composant est une valeur nulle, le contenu d'affichage de la page sera [Scope Slot : La valeur du paramètre dans le slot est une valeur nulle]. 🎜🎜Les emplacements de portée ont divers scénarios d'utilisation et sont largement utilisés dans divers frameworks. Par exemple, la personnalisation du contenu d'affichage d'une certaine ligne ou colonne d'un tableau dans ElementUI est un exemple typique de scénarios d'application de portée. 🎜🎜【Recommandation associée : "🎜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!