插槽概述Slot可翻译中文为插槽、空槽、钥匙槽。以下为官方定义Solt插槽是 Vue 提供的一种内容分发机制允许父组件向子组件指定位置注入内容。简单理解为大门样式已经设计好钥匙空槽预留使用大门的人可以按装指纹锁、物理锁等锁。Slot插槽分三种类型默认插槽具名插槽作用于插槽默认插槽概述默认插槽是具名插槽的一个特例实际类型应分成两类具名插槽作用于插槽默认插槽实例创建FishFish组件提供标题、尾部中间插槽内容由使用者提供创建App组件引用Fish组件App组件代码template div classapp Fish div游泳的鲫鱼/div /Fish Fish template div会飞的鱼/div /template /Fish Fish template v-slot:default div跃龙门的鲤鱼/div /template /Fish /div /template script setup langts import Fish from ./view/Fish.vue; /scriptFish组件代码template div classfish h2头部/h2 slot/slot h2底部/h2 /div /template运行效果注意中间位置会飞的鱼没有显示出来默认插槽不需要使用template标签若使用必须给标签设置默认名称。具名插槽概述在Fish组件中可能会有很多个插槽 如顶部、中部都可以设置一个插槽。使用名称来区分插槽给slot设置名称template标签设置slot名称具名插槽实例Fish组件代码template div classfish h2{{title}}/h2 slot namecontent默认数据/slot slot namefooter h2底部/h2 /slot /div /template script setup langts defineProps([title]); /scriptApp组件代码template div classapp Fish title飞鱼 template v-slot:content div会飞的鱼/div /template /Fish Fish title飞鱼 template v-slot:footer h2鲤鱼跃龙门/h2 /template template v-slot:content div会飞的鱼/div /template /Fish Fish title草鱼 template #content div吃草的鱼/div /template template v-slot:footer h2很爱水草/h2 /template /Fish /div /template script setup langts import Fish from ./view/Fish.vue; /script运行效果引用第一个Fish组件时当不使用名称为footer的插槽时它显示默认值引用第二个组件说明template显示位置取决于所选Slot引用第三个组件说明v-slot:可用#缩写如v-slot:content缩写成#content作用域插槽概述插槽实际分两类一是具名插槽一是作用域插槽两者区别:具名插槽数据与显示都在使用者作用域插槽的数据是在被引用的组件当中使用者只负责显示数据通过slot标签可以将数据传递给template作用域插槽实例Fish组件代码template div classfish h2{{title}}/h2 slot namecontent :datafishs默认数据/slot /div /template script setup langts import { reactive } from vue; defineProps([title]); let fishs reactive([ { name: 鲫鱼, price: 10 }, { name: 草鱼, price: 33 }, { name: 娃娃鱼, price: 88 }, ]) /scriptApp组件代码template div classapp Fish title飞鱼 template v-slot:contentparams ul li v-foritem in params.data 鱼{{ item.name }}--价格:{{ item.price }} /li /ul /template /Fish Fish title草鱼 template #content{data} h4 v-foritem in data 鱼{{ item.name }}--价格:{{ item.price }} /h4 /template /Fish /div /template script setup langts import Fish from ./view/Fish.vue; /script运行代码查看效果核心代码传递数据slot传递数据slot namecontent :datafishs默认数据/slot传递数据template 接收数据template v-slot:contentparams。注意param结构赋值data总结