目录：
一、slot内容分发
slot本意：位置、槽
作用：用来获取组件中的原内容，它其实是一个组件，在Vue api中：slot
slot分类：单个slot，具名slot
二、为什么要用slot内容分发？
根据我们之前学的东西，看下如下代码：
<body>
<div id="box">
<!--在引用组件内部，添加内容-->
<my-hello>teacher gao is very handsome</my-hello>
</div>
<!--my-hello的引用模板-->
<template id="hello">
<div>
<h3>欢迎来到高哥哥的博客园</h3>
</div>
</template>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#box",
components:{
‘my-hello‘:{ //局部组件my-hello
template: "#hello"
}
}
});
</script>
</body>
看下页面输出结果：
欢迎来到高哥哥的博客园
我们再来看看 引用组件中间还有我们想要输出的内容，如下：
<my-hello>teacher gao is very handsome</my-hello>
那如何获取呐，这个时候就要用到 slot 内容分发了。
三、单个slot
单个slot，又叫匿名slot，它是没有名字的，会获取你引用组件中的内容，并且在页面上显示出来，例子如下：
<body>
<div id="box">
<my-hello>teacher gao is very handsome</my-hello>
</div>
<template id="hello">
<div>
<h3>欢迎来到高哥哥的博客园</h3>
<!--引用单个slot组件，获取<my-hello>组件中间的内容-->
<slot></slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
.....//上面的例子有
</script>
</body>
输出内容如下：
欢迎来到高哥哥的博客园 #<my-hello>组件模板中h3显示的内容 teacher gao is very handsome #<my-hello>teacher gao is very handsome</my-hello> 中间的内容
你看看，作用还是很大的吧。
原文：https://www.cnblogs.com/zhangqigao/p/12487496.html