一、背景：
1.1、对于开发可扩展组件非常有用，特别是大型项目；
1.2、匿名slot 适用于只插入一个的时候；
1.3、具名slot 可清晰的插入多个slot，按name匹配使用；
1.4、在slot的内部可以将值通过有名slot传递出去，让外层组件接收，常用于表格展示；
通俗理解：
“占坑”，在组件模板中预定位置（一个或多个），使用该组件时，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ”mySlot ” 的元素就会替换该对应位置内容；
二、匿名插槽
子组件：
<slot></slot>
父组件：
<slot style="color:blue;">我是匿名插槽</slot>
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；
三、具名插槽
子组件：
<slot name="slotTest2"></slot>
父组件：
<div name="slotTest2">
<span style="color:red;">我是具名插槽</span>
</div>
三、作用域插槽
理解：
作用域插槽在子组件中把“当前数据”传递给父组件，父组件接收，对接收到的数据进行符合业务逻辑、代码逻辑的处理，展示出想要的数据。
子组件：
<!-- 作用域插槽 -->
<div v-for="(item, index) in list" :key="index">
<slot name="slotTest3" :item="item"></slot>
</div>
父组件：
<!-- 作用域插槽 -->
<template #slotTest3="scope">
<div>{{scope}}</div>
<div>{{scope.item.name}}</div>
</template>
效果：
四、完整代码
子组件代码
<template> <div class="hello"> <!-- 匿名插槽 --> <slot></slot> <!-- 具名插槽 --> <slot name="slotTest2"></slot> <!-- 作用域插槽 --> <div v-for="(item, index) in list" :key="index"> <slot name="slotTest3" :item="item"></slot> </div> </div> </template> <script lang="ts"> import { Options, Vue, } from 'vue-class-component'; @Options({ props: { msg: String, list: Array }, }) export default class HelloWorld extends Vue { msg!: string list!: any } </script> <style scoped lang="scss"> </style>
父组件代码：
<template> <div class="home"> <slotTest1 :msg="title" :list="list"> <slot style="color:blue;">我是匿名插槽</slot> <!-- 匿名插槽，注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）； --> <div name="slotTest2"> <span style="color:red;">我是具名插槽</span> </div> <div> </div> <!-- 作用域插槽 --> <template #slotTest3="scope"> <div>{{scope}}</div> <div>{{scope.item.name}}</div> </template> </slotTest1> </div> </template> <script lang="ts"> import { Options, Vue } from 'vue-class-component'; import slotTest1 from './components/slot-child1.vue'; @Options({ components: { slotTest1, }, }) export default class Home extends Vue { public title = '插槽' public list = [ { name: 'snow', age: '18' }, { name: 'snow2', age: '20' }, { name: 'snow3', age: '22' }, ] } </script>
五、欢迎交流指正
