slot:元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽
注意：匿名插槽被作用域插槽覆蓋了,以靠后的作用域插槽模板为准
parentSlot.vue
<template>
<div>
<parent-childslot>
<div style="width: 100%;height: 100px;margin: auto auto;background-color: red;color: black">
parent hello world1
</div>
<div slot="test" style="width: 100%;height: 100px;margin: auto auto;background-color: red;color: black">
parent hello world2
</div>
<div style="width: 100%;height: 100px;margin: auto auto;background-color: red;color: black">
parent hello world3
</div>
<div slot-scope="user" class="tmpl">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</div>
</parent-childslot>
</div>
</template>
<script>
import childslot from "./childSlot"
export default {
components: {
"parent-childslot": childslot
}
}
</script>
childSlot.vue
<template>
<div>
<!--插槽的应用场景:主要用于多个父组件对于一个字组件的内容有不同的实现方式-->
<!--匿名插槽-->
<slot></slot>
<!--具名插槽-->
<slot name="test">
child hello world
</slot>
<!--作用域插槽——带数据的插槽-->
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
</script>
