vue3中怎么使用插槽

前言

插槽的使用在我们的开发中也是非常常见的，插槽是什么呢？有的小伙伴可能还不清楚他具体干嘛用的。我们在使用子组件标签的时候，我们往标签中加内容，是不会生效的。但是如果我们使用了插槽，就可以往标签里面添加自己想嵌进去的内容，比如你加一段html文本。那么如何正确的使用插槽呢？今天就简单为大家总结一下！

插槽类型

在vue3中，一共有三种类型的插槽：普通插槽、具名插槽、作用域插槽。

普通插槽

普通插槽使用方法最简单，直接在子组件加一个slot标签，父组件就可以使用了。

//子组件
<template>
    <slot />
</template>
//父组件
<template>
    <Son>
        <template #default>
            <div>这是一个普通插槽</div>
        </template>
    </Son>
</template>

以上你在Son标签里面写的内容就会正确的显示到页面上，这种普通插槽一般在你只添加一个插槽的时候使用，你子组件slot标签放的位置决定你父组件里面添加的内容所在的位置，你也可以不写外层的template标签效果也是一样的。

具名插槽

具名插槽，顾名思义就是带有名字的插槽，当你一个子组件要使用多个插槽的时候，你就需要给你的插槽带上标识。

//子组件
<template>
    <slot name="test"></slot>
</template>
//父组件
<template>
    <Son>
        <template #test>
            <div>这是一个具名插槽</div>
        </template>
    </Son>
</template>

作用域插槽

当你的插槽里面需要携带子组件里面的某些参数传递给父组件的时候，就需要用到这个插槽，简单说就是可以传递参数的插槽。

//子组件
<script setup lang="ts">
const user = {
    name: 'winy',
    age: 20,
};
</script>

<template>
    <slot
        :user="user"
        name="scoped"
    ></slot>
</template>
//父组件
<template>
    <Son>
        <template #scoped="slotProps">
            <div>这是一个作用域插槽</div>
            <div>name:{{ slotProps.user.name }}</div>
            <div>age:{{ slotProps.user.age }}</div>
        </template>
    </Son>
</template>