1. 什么是插槽
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽
2. . 体验插槽的基础用法 （简写为#）
在封装组件时，可以通过 <solt>元素定义插槽，从而为用户预留内容占位符。示例代码如下
认为是组件封装期间，为用户预留的内容的占位符。
<template>
<p>这是MyCom1 组件的第一个p标签</p>
//通过sort 标签,为用户预留内容占位符(插槽)
<slot></slot>
<p>这是MyCom1 组件最后一个P标签</p>
</template><my-com-1>
// 在使用MyCom1组件是,为插槽指定具体的内容
<p>用户自定义的内容</p>
</my-com-1>2.1 没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下 :
<template>
<p>这是MyCom1 组件的第一个p标签</p>
//封装组件，没有预留任何插槽
<p>这是MyCom1 组件的最后一个p标签</p>
</template><template>
<p>这是MyCom1 组件的第一个p标签</p>
//封装组件，没有预留任何插槽
<p>这是MyCom1 组件的最后一个p标签</p>
</template>在封装组件是，为预留的<slot>提供对应的值，这种用法，叫做"作用域插槽"(留有数据的插槽)
<template>
<div class="app-container">
<h1>App 根组件</h1>
<hr />
<Article>
<template #title="{msg,user}">
<h3>我是文章的标题</h3>
<h4>{{msg}}</h4>
<h4>{{user.name}}</h4>
</template>
<template #content>
<p>我是文章的内容</p>
<p>我是文章的内容</p>
<p>我是文章的内容</p>
</template>
<template #footer>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
<p>我是文章的页脚</p>
</template>
</Article>
<div class="box" style="display:none">
<!-- 渲染 Left 组件和 Right 组件 -->
<Left>
<!-- 默认情况下，在使用组件的时候提供的内容都会被填充到名字为default的插槽之中 -->
<!-- 1.如果要内容填充到指定名称的插槽中，需要使用v-slot:这个指令 -->
<!-- 2.v-slot:后面要跟上插槽的名字 -->
<!-- 3.v-slot:指令不能直接用在元素身上,必须在template标签上 -->
<!-- 4.teplate这个标签，他是一个虚拟的标签，只起到一个包裹的作用，但是不会被渲染为任何实质性的html元素 -->
<!-- 5.v-slot:指令的简写形式是# -->
<template #default>
<p>这是在left组件的内容区域,声明的p标签</p>
</template>
</Left>
</div>
</div>
</template>
<script>
import Article from './components/Article.vue'
import Left from './components/Left.vue'
export default {
components: { Left, Article },}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>
<template>
<div class="article-container">
<!-- 文章的标题 -->
<div class="header-box">
<slot name="title" msg="Helo vue .js" :user="userinfo"></slot>
</div>
<!-- 文章的内容 -->
<div class="content-box">
<!-- 在封装组件是，为预留的<slot>提供对应的值，这种用法，叫做"作用域插槽"(留有数据的插槽) -->
<slot name="content"></slot>
</div>
<!-- 文章的作者 -->
<div class="footer-box">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Article',
data() {
return {
userinfo:{
name:"张三",
age:"23"
}
}
},
mounted() {},
methods: {},
}
</script>
<style lang="less" scoped>
.article-container {
>div{
min-height: 150px;
}
.header-box {
background-color: pink;
}
.content-box {
background-color:lightblue;
}
.footer-box {
background-color: lightcoral;
}
}
</style>在设置是，要先确认接收方与发送方，接收方要通过template里面的v-slot来接收并且指定插槽名字，发送方需要在组件内定义数据通过slot来发送数据，发送形式可以有多种。
注意:1.默认情况下,在使用组件的时候提供的内容都会被被填充到名字为default的插槽之中
2.如果要内容填充到指定的插槽中,需要v-slot：这个指令
3.v-slot：后面要跟上插槽的名字（在name节点中定义的）
4.v-slot：指令不能用在元素的身上，必须在template标签上或者在已经注册节点
5.teplate这个标签的作用，但是不会被渲染为任何实质性的html元素
6.v-slot：指令的简写形式是#
