千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；

组件中有单个或多个未命名slot标签时

<Child><span style=”color:red;”>hello world</span></Child>  

<template>   

 <div>

<slot></slot>

<slot style=”color:blue;” >这是在slot上添加了样式</slot>

<slot name=”mySlot”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

使用时候子组件标签<Child>中要有<template slot-scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；