vue3的插槽 slot

作用：向一个组件传递内容，可使用插槽。通过插槽来分发内容，即插槽作为分发内容的出口。使用<slot>作为想要插入内容的占位符。

插槽的基本使用：

<!--父组件index.vue-->
<template>
    <div>parent</div>
    <div>
        //匿名插槽
        <son><button>按钮</button></son>    //插入什么内容由父组件决定       
        <son><input type="text"></son>
    </div>
    <div>
        //具名插槽
        <son>
           <!--v-slot只能添加在<template>上-->
           <template v-solt:button><button>按钮</button></template>   //根据定义的名字找到子组件中对应的插槽，然后进行替换
           <template v-solt:input><input type="text"></template>
        </son>
    </div>
</template>

<script setup>
import son from './son.vue';
</script>


<!--子组件son.vue-->
<template>
    <div>son</div>
    <div>
        //匿名插槽使用方式
        <slot></slot>
    </div>
    <div>
        <!--如果有多个值，同时放入组件进行替换时，一起作为替换元素-->
        //具名插槽使用方式
        <slot name="button" />
        <slot name="input" />
    </div>
</template>

<script setup>
import { useSlots } from 'vue'   //引入方式
const slots = useSlots()         //使用方式
</script>

在向具名插槽提供内容的时候，可以在一个<template>元素上使用v-slot指令，并以v-slot指令参数的形式提供其名称。

如上例所示<template>元素中的所有内容都将会被传入响应的插槽。

注意：v-slot只能添加在<template>上

vue3—插槽 slot

vue3的插槽 slot