网站开发相关知识福州seo网络推广
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>
案例：
需求：假设我们有一个子组件ListComponent，它包含一个列表，并且我们希望在父组件中自定义每个列表项的内容。我们可以使用作用域插槽来实现这个需求。
- 子组件（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>