## 一、概述 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。 >[danger] 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制； ## 二、插槽分类 插槽的分类： * **默认插槽**`default` * **具名插槽**`name` * **作用域插槽**`v-slot` ~~~html // Child.vue <template> <div> <main> <!-- 默认插槽 --> <slot> <!-- slot内为后备内容 --> <h3>没传内容</h3> </slot> </main> <!-- 具名插槽 --> <header> <slot name="header"> <h3>没传header插槽</h3> </slot> </header> <!-- 作用域插槽 --> <footer> <slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> <footer> </div> </template> ~~~ ~~~html //Parent.vue <template> <child> <!--默认插槽--> <template v-slot> // v-slot:default <div>默认插槽</div> </template> <!--具名插槽--> <template #header> // v-slot:header <div>具名插槽</div> </template> <!--作用域插槽--> <template #footer="slotProps"> //v-slot:footer <div> {{slotProps.testProps}} </div> </template> <child> </template> ~~~ ## 三、简单实例 父： ```html <template> <div> 我是父组件 <slotOne1> <p style="color:red">我是父组件插槽内容</p> </slotOne1> </div> </template> ``` 子： ```html <template> <div class="slotOne1"> <div>我是slotOne1组件</div> <slot></slot> </div> </template> ``` 效果示意图：