1. Emplacement : Le modèle du composant écrasera le contenu original du composant (c'est-à-dire que l'étiquette personnalisée n'affichera pas le contenu interne). Utilisez l'emplacement pour afficher le contenu de l'étiquette personnalisée ;
Fonction Slot : le composant parent fournit du contenu et est affiché dans le composant enfant
2. Structure des emplacements :
1. Emplacement anonyme (emplacement unique, aucun attribut de nom) : le contenu transmis du composant parent au composant enfant écrasera le contenu par défaut dans l'emplacement du composant enfant.
Composant parent :
<template>
<div>
<h2>小d页面视图</h2>
<h2>我是父亲</h2>
<ddSon>
默认插槽显示的内容
</ddSon>
</div>
</template>
<script setup>
import ddSon from "../components/ddSon.vue"
</script>Sous-ensemble :
<template>
<div style="background-color: #fff;">
<h3>我是孩子</h3>
<!-- 1.默认插槽： -->
<slot>默认插槽内容</slot>
</div>
</template>
<script setup>
</script>
Effet:
2. Emplacement nommé : (avec attribut de nom)
Composant parent :
<template>
<div>
<h2>小d页面视图</h2>
<h2>我是父亲</h2>
<ddSon>
<template v-slot:header>具名插槽显示内容：nihao</template>
//简写
<!-- <template #header>具名插槽显示内容：nihao</template> -->
</ddSon>
</div>
</template>
<script setup>
import ddSon from "../components/ddSon.vue"
</script>Sous-ensemble :
<template>
<div style="background-color: #fff;">
<h3>我是孩子</h3>
<slot name="header"></slot>
</div>
</template>
Effet:
3. Emplacement de portée (avec emplacement de données)
Composant parent :
<template>
<div>
<h2>我是父亲</h2>
<ddSon>
<template v-slot:hhgg="ChildSlot">
{
{ChildSlot.item}}
</template>
</ddSon>
</div>
</template>
<script setup>
import ddSon from "../components/ddSon.vue"
</script>Sous-ensemble :
<template>
<div style="background-color: #fff;">
<h3>我是孩子</h3>
<ul>
<li v-for="(item,index) in items" :key="index">
<slot :item="item" name="hhgg"></slot>
</li>
</ul>
</div>
</template>
<script setup>
const items = ref(['hhh','ggg'])
</script>
Effet:
