1 简介
是一种组件间通信的方式，让父组件可以向子组件指定位置插入 html 结构。子组件中的提供给父组件使用的一个占位标签，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
匿名插槽，具名插槽， 作用域插槽
2 匿名插槽
2.1 子组件 StudentComp.vue
在子组件StudentComp.vue中，<h1>小学生</h1>这个标签下面的结构是不确定的，希望在父组件使用该组件的时候传入结构。所以在这里添加一个slot标签。并且可以填写默认结构，当父组件不传时显示默认结构
<template>
<div>
<h1>小学生</h1>
<slot>默认内容(父组件不传结构时显示)</slot>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
}
}
}
</script>
2.2 父组件SchoolComp.vue
如下，在使用StudentComp标签时，可以传入结构。在传入的结果上面需要加上一个属性slot，一般都用一个template标签来包裹要传入的结果
<template>
<div>
<h1 >实验小学</h1>
<StudentComp >
<template slot>
<h1 >父组件传入的结构</h1>
<button>父组件传入的结构</button>
</template>
</StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
}
},
components:{
StudentComp
}
}
</script>
2.3 效果
3 具名插槽
具名插槽是匿名插槽的扩展。就是在slot标签加了一个name属性，这个样子可以区分多个slot标签
3.1 子组件StudentComp.vue
这里有两个插槽，设置name属性
<template>
<div>
<h1>小学生</h1>
<slot name="slot1">默认内容1(父组件不传结构时显示)</slot>
<h1>中学生</h1>
<slot name="slot2">默认内容2(父组件不传结构时显示)</slot>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
}
}
}
</script>
3.2 父组件SchoolComp.vue
这里要传入的结果slot属性的值要设置为要插入的插槽的name属性值
<template>
<div>
<h1 >实验小学</h1>
<StudentComp >
<template slot="slot1">
<h1 >父组件传入的结构</h1>
<button>父组件传入的结构</button>
</template>
<template slot="slot2">
<h1 >父组件传入的结构2</h1>
<button>父组件传入的结构2</button>
</template>
</StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
}
},
components:{
StudentComp
}
}
</script>
3.3 效果
4 作用域插槽
作用域插槽扩展了一个功能，可以把子组件的数据传到父组件
4.1 子组件StudentComp.vue
在插槽，可以传入数据到父组件那里。
在slot标签填写任意属性名，传入数据(可以填写多个属性名)
这里传入了两个数据，名字分别为datalist和count
<template>
<div>
<h1>小学生</h1>
<slot name="slot1" :datalist="datalist" :count="count">默认内容1(父组件不传结构时显示)</slot>
</div>
</template>
<script>
export default {
name:'StudentComp',
data(){
return {
datalist:['a','b','c'],
count:1
}
}
}
</script>
4.2 父组件SchoolComp.vue
使用scope属性接收数据，接收到的是一个key-value对象
如下面，通过data.datalist和data.count可以获取到两个数据
<template>
<div>
<h1 >实验小学</h1>
<StudentComp >
<template slot="slot1" scope="data">
<ul>
<li v-for="(g,index) in data.datalist" :key="index">{{g + '-' + data.count}}</li>
</ul>
</template>
</StudentComp>
</div>
</template>
<script>
import StudentComp from './StudentComp'
export default {
name:'SchoolComp',
data(){
return {
}
},
components:{
StudentComp
}
}
</script>
4.3 效果
