1、组件中有单个或多个未命名slot标签时，如下：
<Child><span style=”color:red;”>hello world</span></Child>
<template>
<div>
<slot></slot>
<slot style=”color:blue;” >这是在slot上添加了样式</slot>
<slot name=”mySlot”>这是拥有命名的slot的默认内容</slot>
</div>
</template>
会输出：两个红色的hello world，以及一个使用slot的默认内容
hello world
hello world
这是拥有命名的slot的默认内容
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；
2、组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：
<Child>
<span slot="header">hello world</span>
<span slot="main">hello world</span>
<span slot="footer">hello world</span>
<span slot="other">{{otherData}}</span>
</Child>
<template>
<div>
<slot name=”header”>这是拥有命名的slot的默认内容</slot>
<slot name=”main”>这是拥有命名的slot的默认内容</slot>
<slot name=”footer”>这是拥有命名的slot的默认内容</slot>
<slot name=”other”>这是拥有命名的slot的默认内容</slot>
</div>
</template>
3、作用域插槽：
使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；
作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：
<ul>
<slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
slot的默认内容
</slot>
</ul>
<Child>
<template slot="item" scope="props">
<li>{{props.myname}}</li>
</template>
</Child>
4、slot插槽使用注意：
slot可以包含任何模板代码，包括 HTML、字符文档、甚至组件
但是如果子组件内没有使用slot，任何传入它的内容都会被抛弃。
插槽显示顺序会和子组件中的命名顺序一致，父组件中需要显示的数据会根据name命名寻找对应的位置，
eg:
<template>
<div id="app">
<test-slot>
<div slot="first">
<span>1</span>
<span>第一个</span>
</div>
<div>
<span>默认slot</span>
</div>
<div slot="second">
<span>2</span>
<span>第二个</span>
</div>
</test-slot>
</div>
</template>
<script>
import testSlot from './components/testSlot'
export default {
data(){
return {
}
},
components:{
testSlot
}
}
</script>
子组件testSlot.vue
1 <template> 2 <div class="testSlot"> 3 <div> 4 <slot></slot><slot></slot> 5 </div> 6 <div class="test-second"> 7 <slot name="second"></slot> 8 </div> 9 <div class="test-first"> 10 <slot name="first"></slot> 11 </div> 12 </div> 13 </template> 14 15 <script> 16 export default { 17 data(){ 18 return { 19 20 } 21 } 22 } 23 </script>
输出会是:
默认slot
默认slot
2 第二个
1 第一个