Vue 3中的插槽 slot 是一种用于复用组件的机制。它允许你在组件的模板中定义一些可替换的内容，然后在使用该组件时填充这些内容
在Vue 3中，插槽被称为
<slot>元素。你可以在组件的模板中使用<slot>元素来声明一个插槽
一、默认插槽
下面通过一张图帮你大致了解插槽的作用原理：
下面是一个简单的组件模板示例：
//子组件Card<template><!-- 定义一个默认插槽（不需要命名） --><div><h1>标题</h1><slot></slot><p>底部内容</p></div>
</template><script setup></script><style></style>//父组件APP<template><div><Card><!-- 【实验1】把代码片段插入默认插槽，可以不使用<template>标签封装 --><p>这是自定义的内容(会被默认插入默认插槽)</p><h3>我是插入默认插槽的三级标题</h3></Card></div>
</template><script setup>import Card from './components/Card.vue';
</script>
在上面的示例中，在子组件用 <slot></slot>声明了一个名为默认插槽的插槽。当你在父组件中使用这个组件时，可以在其标签内部填充内容 <p></p>、<h3></h3>，这些内容将被插入到<slot></slot>所在的位置。
运行结果：
二、具名插槽
除了默认插槽，Vue 3还引入了具名插槽。你可以在
<slot>元素上使用name属性来定义一个具名插槽
下面通过一张图帮你大致了解具名插槽的作用原理：
例如：
//子组件Card<template><div><!-- 定义一个默认插槽（不需要命名） --><div><h1>标题</h1><slot></slot><p>底部内容</p></div><!-- 定义一个具名插槽（需要通过name命名，最常用） --><div><slot name="footer"></slot></div> </div>
</template><script setup></script><style></style>在上面的示例中，除了默认插槽外，还定义了一个名为footer的具名插槽。
当使用具名插槽时，可以使用<template>元素来包裹插入的内容，并使用v-slot:指定要插入的具名插槽。
//父组件APP<template><div><Card><!-- 【实验2】把代码片段插入具名插槽，必须使用<template>标签封装，并且用v-slot:指定插槽的名字，v-slot:简写形式为# --><template v-slot:footer><button @click="handleClick">我是插入具名插槽的按钮</button></template></Card></div>
</template><script setup>import Card from './components/Card.vue';const handleClick = () => {alert('插入具名插槽的按钮被点击了！');};
</script>
v-slot:简写形式为 # ：
<!-- v-slot:简写形式为# --><template #footer><button @click="handleClick">我是插入具名插槽的按钮</button></template>在上面的示例中，<button @click="handleClick"> </button>将被插入到组件的模板中的具名插槽footer所在的位置。
运行结果：
使用了具名插槽的内容会被插入到组件的模板中的具名插槽footer所在的位置，而不会在默认插槽的位置
三、作用域插槽
作用域插槽的实现方式是通过在父组件中使用
<template>元素来定义插槽，然后在子组件中使用<slot>元素，并将数据通过插槽属性进行传递。
下面通过一张图帮你大致了解具名插槽的作用原理：
例如：
在子组件中，定义一个作用域插槽（需要通过name命名，所以它也是具名插槽的一种，但要求在插槽里配置一些数据），子组件将 url 和 title 数据配置到 name="user" 的插槽中
//子组件Card<template><!-- 定义一个作用域插槽（需要通过name命名，所以它也是具名插槽的一种，但要求在插槽里配置一些数据） --><div><slot name="user" url="www.baidu.com" title="百度一下"></slot></div>
</template><script setup></script><style>
</style>父组件将某个片段插入该插槽时，便可通过 v-slot:user="data" (data是随便取的名字) 来接收这些数据
//父组件APP<template><div><Card><!-- 【实验4】作用域插槽：子组件将url和title数据配置到 name="user" 的插槽中,当父组件将某个片段插入该插槽时，便可通过 v-slot:user="data" (data是随便取的名字) 来接收这些数据--><template v-slot:user="data"> 子组件通过作用域插槽传来的数据: {{ data.url }} ， {{ data.title }}</template> </Card></div>
</template><script setup>import Card from './components/Card.vue';
</script>
运行结果：
想要学习更多Java知识：点击Java专栏
