插槽使用场景是；如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接按下面这样写，是不可以实现的，因为如果me-component没有包含一个 元素，则任何传入它的内容都会被抛弃：
文章图片
要实现上面的使用场景，可以利用插槽：
我是header
>
Vue.component('me-component', {
template:
`你好
`
})
var vm = new Vue({
el:"#app"
})
但是，假如使用多个插槽的时候，就需要用具名插槽
我是header
我是footerr
>
Vue.component('me-component', {
template:
`你好
`
})
var vm = new Vue({
el:"#app"
})
另外slot 插槽还可以定义默认值，如果父组件没有对应的插槽标签，那么deom上显示的是
文章图片
文章图片
以上代码，slot 特性的也可以直接用在一个普通的元素上。这样的话template标签对就可以去掉了
{{resave.item}}
效果图：
文章图片
【vue|vue插槽、具名插槽和作用域插槽】本文参考自：https://www.jianshu.com/p/d8401e291258
推荐阅读
- #|[vue] slot插槽 默认插槽，具名插槽，作用域插槽
- vue(十八)——vue中插槽(slot)默认插槽，具名插槽、作用域插槽
- vue|vue中v-slot详解，具名插槽和作用域插槽
- vue|Element-UI默认样式改不了（怎么办）
- vue.js|vue基础入门之侦听器、计算属性、vue-cli、vue组件
- springboot|Springboot+Vue+Element实现的CRM管理系统
- java进阶-框架篇|springboot + VUE实现后台管理系统(集成JWT接口权限验证)
- SpringBoot教学|如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程）
- VUE|Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）