1.什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
2.插槽使用场景
比如有五个页面，这五个页面只有某个区域的内容不一样，复制粘贴是一种办法，但在vue中，插槽（solt）更好的做法。
3.插槽分类
1)默认插槽：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。
父组件：
<template> <div> <solt-child title="默认插槽"> <template><span>默认插槽测试</span></template> </solt-child> </div> </template> <script> import SoltChild from "./SoltChild.vue" export default { components:{ "solt-child":SoltChild, } } </script>
子组件：
<template> <div> <span style="color:red">{{title}}</span> <slot></slot> </div> </template> <script> export default { props:[‘title‘] } </script>
结果：
2）具名插槽：就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
父组件：
<template> <div> <solt-child title="具名插槽"> <template v-slot:right> 右边 </template> <template v-slot:left> 左边 </template> </solt-child> </div> </template> <script> import SoltChild from "./SoltChild.vue" export default { components:{ "solt-child":SoltChild, } } </script>
子组件：
<template> <div> <slot name="left"></slot> <span style="color:red">{{title}}</span> <slot name="right"></slot> </div> </template> <script> export default { props:[‘title‘] } </script>
结果：
原文：https://www.cnblogs.com/zhangxingxia/p/13977356.html