插槽就是在子组件中给父组件提供的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
匿名插槽 //父组件 <template> <div> <slotButton>插槽按钮</slotButton> </div> </template> <script> import slotButton from "./slot-button"; export default { name: "slot", components: { slotButton } }; </script> // 子组件 <template> <div> <button> <slot></slot> </button> </div> </template> <script> export default { name: "slot", data() { return {}; } }; </script> 具名插槽有时我们需要多个插槽，给插槽命名方便定位。
// 父组件 <template> <div> <slotName> <div slot="header">header区域</div> <div>main内容区域</div> <div slot="footer">footer区域</div> </slotName> </div> </template> <script> import slotName from "./slot-name"; export default { name: "slot", components: { slotName }, data() { return {}; } }; </script> // 子组件 <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> 作用域插槽 | 带数据插槽官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的template里面写。
// 父组件 <template> <div> <slotScope> <template v-slot:default="userInfo"> 用户姓名： {{ userInfo }} </template> </slotScope> </div> </template> <script> import slotScope from "./slot-scope"; export default { components: { slotScope } }; </script> // 子组件 <template> <div> <slot :userInfo="userInfo"></slot> </div> </template> <script> export default { name: "slotScope", data() { return { userInfo: { name: "宫鑫" } }; } }; </script>说明：slot理解的并没有很深，只是会用的程度，大多数情况，这些事够用的。
