1. 介绍
在Vue.js中,插槽是一种强大的功能,它允许你创建可重用的模板,并在使用该模板的多个地方插入自定义内容。
插槽为你提供了一种方式,可以在父组件中定义一些“插槽”,然后在子组件中使用这些插槽,插入自己的内容。
2. 插槽的分类
2.1 默认插槽(Default Slots)
这是最常见的插槽类型。如果你在一个组件模板中定义一个slot
素,那么这个元素将被视为默认插槽的内容。
使用场景:只需要传入一个结构
案例:
- 子组件(ChildComponent.vue):
<template>
<div>
<slot>默认内容</slot> <!-- 默认插槽 --> <!-- 里面可以包含默认内容,父组价没有传递,就展示默认内容 -->
</div>
</template>
- 父组件(ParentComponent.vue)
<template>
<ChildComponent>
<p>这是插入到默认插槽的内容</p> <!-- 没有就展示子组件的默认内容,这里:可以为任意的html内容 -->
</ChildComponent>
</template>
2.2 具名插槽(Named Slots)
具名插槽允许你在父组件中为子组件的特定部分提供内容。你可以通过在子组件的模板中添加slot
标签,并为其指定一个名字,来定义具名插槽。
使用场景:一个组件内有多处结构,需要外部传入标签,进行定制 。
案例:
- 子组件(ChildComponent.vue)
<template>
<div>
<slot name="header"></slot> <!-- 具名插槽 name="header"-->
<slot name="footer"></slot> <!-- 具名插槽 name="footer" -->
</div>
</template>
- 父组件(ParentComponent.vue)
<template>
<ChildComponent>
<template v-slot:header> <!-- 指定要插入到具名插槽的内容 --> <!-- 这里的v-slot:可以替换为 # -->
<h1>这是头部内容</h1>
</template>
<template #footer> <!-- 指定要插入到具名插槽的内容 -->
<p>这是底部内容</p>
</template>
</ChildComponent>
</template>
注:v-slot:可以替换为 #,方便进行简写
2.3 作用域插槽(Scoped Slots)
作用域插槽是一种特殊的具名插槽,它允许你访问子组件的数据和方法。通过作用域插槽,你可以在父组件中操作子组件的数据。
使用场景:封装表格组件
基本使用步骤:
- 给 slot 标签, 以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
- 所有添加的属性, 都会被收集到一个对象中
{ id: 3, msg: '测试文本' }
- 在template中, 通过
#插槽名= "obj"
接收,并使用,默认插槽名为 default
<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
</MyTable>
案例:文章来源:https://www.toymoban.com/news/detail-815425.html
需求:假设我们有一个子组件ListComponent
,它包含一个列表,并且我们希望在父组件中自定义每个列表项的内容。我们可以使用作用域插槽来实现这个需求。文章来源地址https://www.toymoban.com/news/detail-815425.html
- 子组件(ListComponent.vue)
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot name="item" :item="item"></slot> <!-- 作用域插槽 -->
</li>
</ul>
</template>
- 父组件(ParentComponent.vue)
<template>
<ListComponent :items="items"> <!-- 将数据传递给子组件 -->
<template #item="{ item }"> <!-- 访问子组件的数据 这里使用了 js的对象解析-->
<p>{{ item.name }}</p> <!-- 使用子组件的数据 -->
<p>{{ item.description }}</p> <!-- 使用子组件的数据 -->
</template>
</ListComponent>
</template>
到了这里,关于Vue-插槽(Slots)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!