开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情
说点题外话
上一篇说了插槽中最基本的默认插槽
这一篇就说说具名插槽
说正文
一、具名插槽
具名插槽（Named Slots）是一种在父组件中定义插槽，并使用
slot元素的name属性将子组件的内容分配到对应的插槽中的技术。
首先见到“具名插槽”这几个字我们就大概能猜到大概意思是有名字的插槽。
我们再来想一想什么时候需要用到具名插槽呢？还是延续上一篇的风格，我们使用App.vue和Home.vue作为插槽讲解组件。我们知道在插槽组件中我们使用进行插入，如果我们有多个插入的地方的话，我们该如何告知插槽将父组件的内容准确的插入想要展示的地方呢？
我们只需要在插槽组件中中添加一个name属性完成具名插槽，父组件中标签内使用v-slot:xx即可。
- App.vue
<template>
<div>
<home>
<template v-slot:left>
<button>我是左边的按钮</button>
</template>
<template v-slot:center>
<span>我是中间的span标签</span>
</template>
<template v-slot:right>
<img src="" alt="我是图片">
</template>
</home>
</div>
</template>
- Home.vue
<template>
<div>
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</div>
</template>
这里有几个可以补充的知识点，我就放在一起说了
- 父组件可以插入任何内容，外层可以包裹template标签更好。
- 如果子组件只使用了默认插槽，父组件中不需要使用
name属性，直接使用<slot></slot>即可
二、 动态插槽
动态插槽是一种非常有用的功能，它允许您根据组件属性或状态的值动态地选择要使用的插槽。这使得组件更加灵活，可以根据不同的用例动态地呈现内容。
在组件模板中，您可以使用特殊的语法来定义动态插槽：
rubyCopy code
<slot :name="slotName"></slot>
在上面的示例中，slotName是一个属性或状态的值，它将动态地确定要使用的插槽名称。
在父组件中，您可以使用以下语法将内容传递给动态插槽：
<template v-slot:[slotName]>
<!-- 要填充的内容 -->
</template>
在上面的示例中，[slotName]是一个计算属性，它将根据属性或状态的值动态地确定要使用的插槽名称。
您还可以使用简写语法来定义和填充动态插槽：
<slot :name="slotName"></slot>
<!-- 简写语法 -->
<template #[slotName]>
<!-- 要填充的内容 -->
</template>
Vue.js动态插槽是一种非常有用的功能，可以帮助您构建更灵活和可重用的组件，并根据不同的用例动态地呈现内容。
结束
下一篇说说作用域插槽
