目录
一、什么是插槽
Vue插槽（slot）：是Vue为组件的封装者提供的能力。允许开发者在封装组件的时候，把不确定的、希望由用户指定的部分定义为插槽
二、插槽的基本使用
vue官方规定：
1. 每一个插槽都有一个默认的name名称，如果省略了slot的name属性，则默认名称叫做default
2. 如果用户没有指定内容，则可以显示插槽里面的默认内容，vue官方叫做后备内容
看下方代码：
<template>
<div class="left-container">
<h3>Left 组件</h3>
<!-- 声明一个插槽 -->
<!-- vue官方规定，每一个插槽都有一个默认的name 名称
如果省略了slot的name属性，则默认名称叫做default
同时如果用户没有指定内容，则可以显示插槽里的默认内容，vue官方叫做后备内容 -->
<slot name="default">这里面是插槽的默认内容</slot>
</div>
</template>
默认情况下在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中
1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令
2. v-slot: 后面要跟上插槽的名字
3. v-slot: 指令不能直接用在元素身上，必须使用在template 标签上
4. template标签，是一个虚拟的标签，只起到了包裹的作用，不会被渲染为任何实质性的html元素
5. v-slot: 简写是 # -->
看下方代码：
<template>
<div class="app-container">
<h1>App 根组件</h1>
<hr />
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
<left>
<!-- 默认情况下在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中 -->
<!-- 1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令
2. v-slot: 后面要跟上插槽的名字
3. v-slot: 指令不能直接用在元素身上，必须使用在template 标签上
4. template标签，是一个虚拟的标签，只起到了包裹的作用，不会被渲染为任何实质性的html元素
5. v-slot: 简写是 # -->
<template v-slot:default>
<p>这是在Left组件的内容区域，声明的p标签</p>
</template>
</left>
</div>
</div>
</template>
三、具名插槽
简单来说就是带名字的插槽就叫做具名插槽
<template>
<div class="artical-container">
<!-- 文章标题 -->
<div class="header-box">
// 放置一个插槽，名字叫做 title
<slot name="title"></slot>
</div>
<!-- 文章内容 -->
<div class="content-box">
// 放置一个插槽，名字叫做 content
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
// 放置一个插槽，名字叫做 autor
<slot name="autor"></slot>
</div>
</div>
</template>
<Artical>
<template #title>
<h2>静夜思</h2>
</template>
<template #content>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</template>
<template #autor>
<div>
作者：李白
</div>
</template>
</Artical>
四、作用域插槽
作用域插槽的定义：在封装组件的时候，为预留slot 插槽提供属性对应的值，这种用法叫做：作用域插槽
看下方代码：
export default {
data() {
return {
info: {
username: 'liupeng',
age: 19
}
}
}
}
<slot name="content" msg="hello vue.js" :user="info"></slot>
使用形参来接收 作用域插槽传递的值，默认是一个空对象
scope 接收过来的是一个对象，可以通过解构赋值，来拿到自己想要的数据-->
<template #content="{ msg, user}">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<p>{ { user.username }}</p>
<p>{ { msg }}</p>
</template>