###
Vue 中的
插槽 (Slot)
在
Vue 组件化开发过程中，为了使父组件能够向子组件
传递内容并控制其显示位置，
Vue 提供了一种称为“
插槽”的机制。通过定义
具名插槽、作用域
插槽等方式可以灵活地定制组件内部结构。
#### 基础用法
最简单的形式就是默认
插槽，默认情况下任何放置于自定义标签之间的 HTML 内容都会被视作该组件实例的内容片段：
```html
<!
-- 子组件
-->
<template>
<div class="child">
<!
-- 默认
插槽 -->
<slot></slot>
</div>
</template>
<script setup lang="ts"></script>
```
当使用这个子组件时，在 `<ChildComponent>` 标签间放入的内容将会渲染到上述模板中 `slot` 所处的位置上[^1]。
####
具名插槽
对于更复杂的场景，则可以通过指定名称来创建多个不同的
插槽区域，并允许父级精确指派特定部分的内容给这些命名好的占位符：
```html
<!
-- 子组件
-->
<template>
<header><slot name="header">Default Header Content</slot></header>
<main><slot>Default Main Content</slot></main>
<footer><slot name="footer">Default Footer Content</slot></footer>
</template>
```
此时可以在调用此组件的地方按需填充各个部位的
数据：
```html
<!
-- 父组件
-->
<ParentComponent>
<template v
-slot
:header>
Customized header content here.
</template>
<p>Main area text.</p>
<template #footer>
Special footer message goes here.
</template>
</ParentComponent>
```
这里展示了两种语法糖：`v
-slot
:`
和缩写的 `#` 符号用于声明具体要映射至哪个
具名插槽之上。
#### 作用域
插槽
如果希望让子组件内的某些
数据也能暴露出来供外部访问
和处理的话，就可以借助带有作用域特性的
插槽功能。这使得我们可以把局部状态
传回给使用者的同时保持良好的封装性：
```html
<!
-- 子组件
-->
<template>
<ul>
<li v
-for="(item, index) in items"
:key="index">
<slot
:item="item"
:index="index"></slot>
</li>
</ul>
</template>
<script setup lang="ts">
import { ref } from '
vue';
const items = ref(['Apple', 'Banana', 'Orange']);
</script>
```
而在实际运用当中则可以根据需求调整列表项的表现样式而不必修改源码逻辑：
```html
<!
-- 父组件
-->
<ListItems>
<template v
-slot="{ item, index }">
{{ index }}
- {{ item }}
</template>
</ListItems>
```
这样不仅实现了高度可配置化的界面构建模式，同时也促进了代码重用性
和维护效率的提升。
### React 中类似的实现方式
虽然 React 并未直接提供名为“slots”的特性，但是却有着相似概念的存在——children 属性以及高阶组件(HOCs)，它们共同构成了强大的组合工具集以满足多样化的布局需求。
- **Children Prop**
: 类似于
Vue 的默认
插槽行为，React 组件接收来自父节点
传递过来的一切作为 children 参数的一部分；
- **Render Props / Children Function**
: 当涉及到动态生成或条件渲染的情况下，往往采用 render prop 或者 child function 形式的 API 设计思路；
例如下面这段展示如何模仿
Vue 的 slot 功能的例子
:
```jsx
// Child Component with Render Props Pattern
function List({ data, renderItem }) {
return (
<ul>
{data.map((item, idx) => (
<li key={idx}>{renderItem(item)}</li>
))}
</ul>
);
}
// Parent Usage Example
function App() {
const listData = ['Red', 'Green', 'Blue'];
return (
<List
data={listData}
renderItem={(color) => `${color.charAt(0).toUpperCase()}${color.slice(1)} Color`}
/>
);
}
```
这种做法同样达到了参数化呈现的效果，而且保留了足够的灵活性去适应各种可能的变化情形[^
2]。
超级会员免费看
本文详细介绍了Vue2中的插槽使用，包括单个插槽、具名插槽以及作用域插槽（数据插槽）。通过示例展示了如何在子组件中定义插槽，以及父组件如何填充和接收数据，强调了具名插槽可以实现多个插槽并存，而作用域插槽允许子组件向父组件传递数据。
订阅专栏 解锁全文
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
