Ranuras en vue (ranuras anónimas, ranuras con nombre, ranuras con alcance)

La comprensión de la ranura: es un 'marcador de posición', que ocupa una buena posición en la plantilla del componente. Cuando se utiliza la etiqueta del componente, el contenido de la etiqueta del componente se completará automáticamente (reemplazando la posición en la plantilla del componente). Primero preparar dos
componentes: componentes Father.vue y children.vue
Introducir componentes children.vue en componentes Father.vue

<script>
import Children from '../components/children.vue'
export default {
    
    
    components:{
    
    
        Children
    }
}
</script>

Uso de la ranura:
1. Ranura anónima (ranura predeterminada)

//在Father.vue组件中写
<template>
<div>
    这是父组件
    <children>
        <div style="background:red">
            这是插槽练习，这是父组件中引入的children组件标签里的内容，这段话会通过	slot插槽显示，如果children组件中没有slot标签，这段话就不会显示
        </div>
    </children>
    <div>
        该标签内容在children标签下面，会正常显示
    </div>
</div>
</template>

<script>
import Children from '../components/children.vue'
export default {
    
    
    components:{
    
    
        Children
    }
}
</script>

//Escribir en el componente children.vue

<template>
<div class="children">
    这是子组件中的内容
    //匿名插槽
    <slot></slot>
</div>
</template>

2. Ranuras con nombre

//在Father.vue组件中写
<template>
<div>
    这是父组件
    <children>
        <!-- 具名插槽 -->
        <template v-slot:header>
            <div>
                这是具名插槽header，看看我的位置，children组件中具名插槽header在slot1的下面
            </div>
        </template>
        <template v-slot:slot1>
            <div style="border:1px solid green"  >
                我是具名插槽slot1
            </div>
        </template>
    </children>
    <div>
        该标签内容在children标签下面，会正常显示
    </div>
</div>
</template>

//Escribir en el componente children.vue

<template>
<div class="children">
    这是子组件中的内容
    <!-- 具名插槽 -->
    <slot name="slot1"></slot>
    <slot name="header"></slot>
</div>
</template>

3. Tragamonedas con alcance

//在Father.vue组件中写
<template>
<div>
    这是父组件
    <children>
        <!-- 作用域插槽 -->
        <template v-slot:name1="aa" >
            <ul>
                <li
                    v-for="item in aa.data" :key="item"
                >
                {
    
    {
    
    item}}
                </li>
            </ul>
        </template>
    </children>
    <div>
        该标签内容在children标签下面，会正常显示
    </div>
</div>
</template>

//Escribir en el componente children.vue

<template>
<div class="children">
    这是子组件中的内容
   	//作用域插槽
    <slot name="name1" :data="data"></slot>
</div>
</template>