这个slot的意思就是插槽，具体的用法就是当有些信息或者有些节点需要由父节点来决定时，用到。相当于，父亲的一些基因，传递了给孩子。看看例子
先看看这种情况，在以下的情况下，在父节点中，写的任何内容，都不会被展示，因为整个子节点会直接替换了父节点中定义的子节点接口。意思就是说，在父节点中<child></child>里的内容会全部抹掉，完全被child组件中的<div>I am children</div>替换掉
father.vue
<template>
<div>
<child>father say hi to you</child>
</div>
</template>
<script>
import child from './child.vue'
export default{
data(){
return {
}
},
components:{
child,
}
}
</script>
child.vue
<template>
<div>
I am children
</div>
</template>
<script>
export default{
data(){
return {
}
},
}
</script>
渲染后的结果为
<div>
<div>I am children</div>
</div>
在这种情况，如果你想把父组件中的内容带到子子组件中，怎么办呢？就需要用到slot了，他分为两种形式，一种是单插槽，一种的多插槽，先看看单插槽
单插槽
先在子组件中定义一个插槽，然后在父组件（father.vue代码不需要作任何修改）中写的任何内容全部都会塞到这个slot节点当中，如下面代码，和最终渲染结果
child.vue
<template>
<div>
<!--在这里定义了一个插槽-->
<slot></slot>
I am children
</div>
</template>
<script>
export default{
data(){
return {
}
},
}
</script>
最终渲染结果
<div>
father say hi to you
<div>I am children</div>
</div>
多插槽
在某种情况，不单单只插一个内容，如果需要插入多个，就需要用到以下的写法
child.vue
<template>
<div>
<!--在这里定义了多个插槽-->
<slot name="slot_1"></slot>
<slot name="slot_2"></slot>
I am children
</div>
</template>
<script>
export default{
data(){
return {
}
},
}
</script>
father.vue
<template>
<div>
<child>
<template slot="slot_1">Slot_1 is here</template>
father say hi to you
<template slot="slot_2">
Slot_2 is here
<div>Slot_2 DIV </div>
</template>
</child>
</div>
</template>
<script>
import child from './child.vue'
export default{
data(){
return {
}
},
components:{
child,
}
}
</script>
最终渲染结果：
<div>
<div>
Slot_1 is here
Slot_2 is here
<div>Slot_2 DIV </div>
I am children
</div> </div>