今天介绍三种vue框架的插槽:默认插槽具名插槽和作用域插槽。接下来我会讲一下我对这三种插槽的理解。1.什么是插槽在讲三种插槽之前我们有必要先了解一下插槽是什么?插槽我们可以认为是一种容器。那容器就需要装一点什么东西的吧?在Vue3中插槽装的是父组件中的html内容。这么说可能不太理解我们就先知道一点就可以了:插槽是装html内容的容器这个容器你可以自定义设计。2.默认插槽在学习默认插槽之前我们先来看三段代码:slot-container.vuetemplatediv classmain-containerdiv classparenth1父组件/h1div classcontentDefaultSlot title今日新闻热点ulli v-fornews in newsList :keynews.id{{ news.content }}/li/ul/DefaultSlotDefaultSlot title今日美食推荐img :srcimgUrl alt美食图片加载失败/DefaultSlotDefaultSlot title今日影视推荐video :srcmovieUrl controls/video/DefaultSlot/div/div/div/templatescript setupimport DefaultSlot from ./default-slot.vue;let newsList [{id: news001, content: 澳总理发帖晒图很荣幸参观中国长城},{id: news002, content: 特朗普改口无意炒掉美联储},{id: news003, content: 巴西一11岁女孩拔牙时发现81颗牙齿},{id: news004, content: 亚马尔与巴萨正式续约 新赛季将身披10号球衣},{id: news005, content: 听孙颖莎说而不是替她说}];let imgUrl https://images.unsplash.com/photo-1568901346375-23c9450c58cd;let movieUrl https://images-assets.nasa.gov/video/One%20Small%20Step/One%20Small%20Step~orig.mp4;/scriptstyle scoped.parent{border-radius: 10px;padding: 10px;box-shadow: 10px;background-color: rgb(219, 240, 248);width: 60%;}.content {display: flex;justify-content: space-evenly;}img, video {width: 100%;}/styledefault-slot.vuetemplatediv classdefault-sloth1子组件/h1h2{{ title }}/h2slot/slot/div/templatescript setup nameDefaultSlotdefineProps([title]);/scriptstyle scoped.default-slot{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 300px;height: 400px;}h2 {background-color: orange;text-align: center;}/styleApp.vuetemplatediv idappSlotContainer/SlotContainer/div/templatescript setupimport CompObj from ./components/comp-obj.vueimport SlotContainer from ./components/slot-container.vue/scriptstyle scoped/style重点关注标红的地方:slot-container.vueDefaultSlot title今日新闻热点ulli v-fornews in newsList :keynews.id{{ news.content }}/li/ul/DefaultSlotDefaultSlot title今日美食推荐img :srcimgUrl alt美食图片加载失败/DefaultSlotDefaultSlot title今日影视推荐video :srcmovieUrl controls/video/DefaultSlotdefault-slot.vueh1子组件/h1slot/slotApp.vueSlotContainer/SlotContainer先来看一下展示效果注意我们这里展示的是slot-container里的内容哦:细心的同学可能就会观察到这里在slot-container.vue中使用的子组件中多了东西那就是子组件三个大字。可我们明明没有写啊那是哪里来的呢又有同学观察到这是default-slot.vue中的html内容啊!那么答案就显而易见了那就是父组件slot-container.vue中使用的DefaultSlot组件标签中html内容有一个固定的格式那就是每一个组件上面都有一个h1标签且内容为子组件这个格式由谁来提供呢由我们使用的子组件提供而位置就在slot标签上。现在我们重新来理解上面我说的插槽是什么的问题了。插槽是可以自定义的装html内容的容器了。父组件来提供装什么html内容而子组件用来规定你用的是什么样的格式来放内容。现在我们再来想一下如果我有多个父组件呢子组件还能用吗答案是肯定的你想啊子组件只是规定了使用这个组件时我的格式得是什么样的。但是我具体在父组件使用时就直接套就可以了。这就是默认插槽。3.具名插槽顾名思义就是有名字的插槽。还是以上面的代码为例:slot-container.vue:templatediv classmain-containerdiv classparenth1父组件/h1div classcontentDefaultSlot title今日新闻热点ulli v-fornews in newsList :keynews.id{{ news.content }}/li/ul/DefaultSlotDefaultSlot title今日美食推荐 template v-slot:simg :srcimgUrl alt美食图片加载失败/template/DefaultSlotDefaultSlot title今日影视推荐 template #svideo :srcmovieUrl controls/video/template/DefaultSlot/div/div/div/templatescript setupimport DefaultSlot from ./default-slot.vue;let newsList [{id: news001, content: 澳总理发帖晒图很荣幸参观中国长城},{id: news002, content: 特朗普改口无意炒掉美联储},{id: news003, content: 巴西一11岁女孩拔牙时发现81颗牙齿},{id: news004, content: 亚马尔与巴萨正式续约 新赛季将身披10号球衣},{id: news005, content: 听孙颖莎说而不是替她说}];let imgUrl https://images.unsplash.com/photo-1568901346375-23c9450c58cd;let movieUrl https://images-assets.nasa.gov/video/One%20Small%20Step/One%20Small%20Step~orig.mp4;/scriptstyle scoped.parent{border-radius: 10px;padding: 10px;box-shadow: 10px;background-color: rgb(219, 240, 248);width: 60%;}.content {display: flex;justify-content: space-evenly;}img, video {width: 100%;}/styledefault-slot.vuetemplatediv classdefault-sloth1子组件/h1h2{{ title }}/h2slot names/slot/div/templatescript setup nameDefaultSlotdefineProps([title]);/scriptstyle scoped.default-slot{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 300px;height: 400px;}h2 {background-color: orange;text-align: center;}/style先来看一下展示的效果:可以观察到在标签中设置了v-slot:s或者其简写#s的组件组件标签中的html内容都显示出来了而没有设置就没有显示出来。也就是说使用这种方式可以使内容插入指定的位置。4.作用域插槽先看代码:slot-container.vue:templatediv classmain-containerdiv classparenth1父组件/h1div classcontentDefaultSlottemplatev-slot:sparamsulli v-fornews in params.newsList :keynews.id{{ news.content }}/li/ul/template/DefaultSlotDefaultSlottemplatev-slot:saaaolli v-fornews in aaa.newsList :keynews.id{{ news.content }}/li/ol/template/DefaultSlotDefaultSlottemplatev-slot:sparamsh5 v-fornews in params.newsList :keynews.id{{ news.content }}/h5/template/DefaultSlot/div/div/div/templatescript setupimport DefaultSlot from ./default-slot.vue;/scriptstyle scoped.parent{border-radius: 10px;padding: 10px;box-shadow: 10px;background-color: rgb(219, 240, 248);width: 60%;}.content {display: flex;justify-content: space-evenly;}img, video {width: 100%;}/styledefault-slot.vue:templatediv classdefault-sloth1子组件/h1slot:newListnewsList x100 y200names/slot/div/templatescript setup nameDefaultSlotimport { reactive } from vue;let newsList reactive([{id: news001, content: 澳总理发帖晒图很荣幸参观中国长城},{id: news002, content: 特朗普改口无意炒掉美联储},{id: news003, content: 巴西一11岁女孩拔牙时发现81颗牙齿},{id: news004, content: 亚马尔与巴萨正式续约 新赛季将身披10号球衣},{id: news005, content: 听孙颖莎说而不是替她说}]);/scriptstyle scoped.default-slot{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 300px;height: 400px;}h2 {background-color: orange;text-align: center;}/style看下效果:细心的同学可以看到这里slot-container.vue中的数据现在放到了default-slot.vue中在slot标签中使用了v-bind动态传递数据(:newsList)静态传递数据(x100,y200)。而且每一个使用到这里插槽的共享的数据。也就是说作用域插槽和之前两个插槽的不同点就在于父组件中展示的数据不是由父组件提供而是由子组件提供的并且每一个在父组件中使用的子组件都可以共享插槽传递的数据。这是我的第二篇vue3的笔记该栏目还会持续更新。如果有什么地方有误烦请各位读者指正。