vue2 slot 插槽 name的使用
时间: 2025-06-30 08:54:00 浏览: 17
### Vue2 中具名插槽(Named Slot)的用法
在 Vue2 中,具名插槽是一种强大的功能,允许父组件向子组件传递多个具有特定名称的内容片段。通过 `slot` 属性指定插槽的名字,在模板中可以使用 `<template>` 或者直接嵌套 HTML 元素来实现。
以下是具体的用法说明以及示例:
#### 基本语法
在子组件中定义具名插槽时,可以通过 `name` 属性为每个插槽命名:
```html
<slot name="header"></slot>
<slot></slot> <!-- 默认插槽 -->
<slot name="footer"></slot>
```
在父组件中使用具名插槽时,需将内容包裹在一个带有 `v-slot:slotName` 的 `<template>` 标签内或者直接使用带名字的 `<slot-name>` 形式的标签[^1]。
#### 示例代码
以下是一个完整的例子展示如何使用具名插槽:
##### 子组件 (ChildComponent.vue)
```vue
<template>
<div class="container">
<header>
<slot name="header">默认头部</slot>
</header>
<main>
<slot>默认主体内容</slot>
</main>
<footer>
<slot name="footer">默认底部</slot>
</footer>
</div>
</template>
<script>
export default {
name: 'ChildComponent'
}
</script>
```
##### 父组件 (ParentComponent.vue)
```vue
<template>
<child-component>
<template v-slot:header>
<h1>这是来自父组件的头部内容</h1>
</template>
<p>这是父组件传入的主体内容。</p>
<template v-slot:footer>
<span>这是来自父组件的底部内容</span>
</template>
</child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent }
}
</script>
```
在这个例子中,父组件分别填充了名为 `header` 和 `footer` 的具名插槽,并提供了默认内容作为后备选项。
#### 关键点总结
- 使用 `name` 属性区分不同的插槽。
- 如果未提供具体插槽内容,则会显示默认内容。
- 可以通过 `v-slot:` 指令绑定到具名插槽上,也可以省略 `v-slot:` 并直接写成 `<template #header>` 的形式。
---
###
阅读全文
相关推荐


















