vue2 插槽（默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 ）
插槽：用于在子组件的指定位置插入指定内容，类似在电梯里挂的若干广告显示屏，可以给指定的位置传入指定的广告
单插槽（匿名/默认插槽）
父组件中（ 此时的 ）
<Child><template><p>身体</p></template></Child>
或（ 默认插槽的 template 标签可以省略）
<Child><p>身体</p></Child>
子组件中
<div><p>头</p><slot>默认内容 （当父组件标签内无内容时，会显示！）</slot><p>脚</p></div>
多插槽（具名插槽）
-
通过 slot 属性或 v-slot 指令（可简写为 # ）指定插槽的位置，支持中文。
-
slot 和v-slot 可以用在template标签上（推荐），也可以直接用于 html 标签上。
父组件
<Child><template slot='head'>头</template><template slot='foot'>脚</template>
</Child>
或
<Child><template v-slot:head>头</template><template v-slot:foot>脚</template>
</Child>
或
<Child><template #head>头</template><template #foot>脚</template>
</Child>
子组件中
<div><slot name="head"></slot><p>身体</p><slot name="foot"></slot></div>
最终页面效果
头
身体
脚
插槽传值（作用域插槽）
子组件可以通过插槽给父组件传值
v-slot 接收参数 （用于 v-slot 指令标记插槽）
子组件中，将变量status动态绑定到slot标签上
<div><p>头</p><slot name="body" :status="status"></slot><p>脚</p></div>
data(){return{status:'健康的'}}
父组件中，通过 v-slot 接收，子组件通过插槽传入的所有变量，都存在slotProps对象中。
<Child><template v-slot:body="slotProps"><p>{{slotProps.status}}身体</p></template></Child>
slot-scope 接收参数 （用于 slot 属性标记插槽）
子组件
<button><slot name="插槽1" :info="info"></slot>
</button>
data() {return {info: {name: '朝阳'}}
}
父组件，通过slot-scope接收子组件通过插槽传入的值（ slot-scope 里的 {} 是进行解构赋值）
<Child><template slot="插槽1" slot-scope="{info}"><p>{{info}}</p></template>
</Child>