Vue学习:18.Vue插槽
Vue 中的插槽(slot)是一种灵活的机制,用于在父组件中将内容传递到子组件的特定位置。它允许我们在子组件中定义可以在父组件中传递任意内容的“插槽”,从而实现更灵活的组件化。
在Vue中,插槽主要有以下几种类型:
-
默认插槽(Default Slot): 这是最基础的插槽类型。在子组件模板中使用
<slot>
标签作为占位符,父组件则可以在使用该子组件时,在其标签内插入任何想要展示的内容。例如:子组件(ChildComponent.vue):
<template>
<div>
<h2>这里是子组件标题</h2>
<slot></slot> <!-- 默认插槽位置 -->
</div>
</template>
父组件(ParentComponent.vue):
<template>
<child-component>
<p>这是来自父组件的内容,将显示在子组件的默认插槽位置。</p>
</child-component>
</template>
2. 具名插槽(Named Slots): 当子组件需要多个插槽时,可以为每个插槽指定一个名称,以便父组件更精确地控制内容的分布。在子组件中使用 <slot name="slotName">
定义具名插槽,父组件则使用 v-slot:slotName
(或简写为 #slotName
从 Vue 2.6 开始)将内容分配到相应的插槽。例如:
子组件(ChildComponent.vue):
<template>
<div>
<h2>这里是子组件标题</h2>
<slot name="header"></slot>
<main>
<slot></slot> <!-- 默认插槽 -->
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
父组件(ParentComponent.vue):
<template>
<child-component>
<template v-slot:header>
<h3>这是头部插槽内容</h3>
</template>
<p>这是主内容区域,将显示在子组件的默认插槽。</p>
<template v-slot:footer>
<p>这是底部插槽内容</p>
</template>
</child-component>
</template>
当子组件需要向插槽内容传递数据时,可以使用作用域插槽(Scoped Slots)。子组件通过 <slot>
元素的 v-bind
向父组件传递数据,父组件则在 v-slot
内部创建一个函数来接收这些数据,并根据这些数据渲染插槽内容。在 Vue 3 中,作用域插槽已被更强大的“插槽props”所替代。
Vue 2 中的作用域插槽示例:
子组件(ChildComponent.vue):
<template>
<ul>
<li v-for="item in items">
<slot :item="item"> <!-- 传递 item 数据给作用域插槽 -->
{{ item.text }} <!-- 默认内容,当父组件未提供插槽内容时使用 -->
</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [{ text: 'Item 1' }, { text: 'Item 2' }]
}
}
}
</script>
父组件(ParentComponent.vue):
父组件中通过【v-slot:item=' '】接收来自子组件的数据,可简写为:【#item=' '】
<template>
<child-component>
<template v-slot:item="slotProps">
<strong>{{ slotProps.item.text }}</strong> <!-- 使用传递过来的数据 -->
</template>
</child-component>
</template>
总结来说,Vue中的插槽机制极大地增强了组件的灵活性与可定制性,使得父组件能够以声明式的方式控制子组件内部的内容布局,同时支持数据的传递,使得父子组件间能更有效地协同工作。