1. Ranura : la plantilla en el componente sobrescribirá el contenido original del componente (es decir, la etiqueta personalizada no mostrará el contenido interno), use la ranura para mostrar el contenido de la etiqueta personalizada;
Función de ranura : el componente principal proporciona contenido y se muestra en el componente secundario
2. Estructura de tragamonedas :
1. Ranura anónima (ranura única, sin atributo de nombre): el contenido pasado del componente principal al componente secundario sobrescribirá el contenido predeterminado en la ranura del componente secundario.
Componente principal:
<template>
<div>
<h2>小d页面视图</h2>
<h2>我是父亲</h2>
<ddSon>
默认插槽显示的内容
</ddSon>
</div>
</template>
<script setup>
import ddSon from "../components/ddSon.vue"
</script>Subconjunto:
<template>
<div style="background-color: #fff;">
<h3>我是孩子</h3>
<!-- 1.默认插槽： -->
<slot>默认插槽内容</slot>
</div>
</template>
<script setup>
</script>
Efecto:
2. Ranura con nombre: (con atributo de nombre)
Componente principal:
<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>Subconjunto:
<template>
<div style="background-color: #fff;">
<h3>我是孩子</h3>
<slot name="header"></slot>
</div>
</template>
Efecto:
3. Ranura para mira (con ranura para datos)
Componente principal:
<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>Subconjunto:
<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>
Efecto:
