默认插槽（匿名插槽）
father.vue
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
</div>
</child>
</div>
</template>
<script>
import child from "./child";
export default {
name: "father",
components: {
child
}
}
</script>
因为父组件在里面写了html模板，那么子组件的匿名插槽这块模板就是下面这样。也就是说，子组件的匿名插槽被使用了，是被下面这块模板使用了。
child.vue
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
<script>
export default {
name: "slot"
}
</script>
具名插槽
father.vue
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
</div>
</child>
</div>
</template>
<script>
import child from "./child";
export default {
name: "father",
components: {
child
}
}
</script>
child.vue
<template>
<div class="child">
<h3>这里是子组件</h3>
<!-- 具名插槽-->
<slot name="up"></slot>
<!-- 具名插槽-->
<slot name="down"></slot>
<!-- 匿名插槽-->
<slot></slot>
</div>
</template>
<script>
export default {
name: "slots"
}
</script>
原文：https://www.cnblogs.com/ronle/p/12179743.html