当前位置：首页 > news >正文

vue 插槽的用法

news 2025/8/10 9:14:24

Vue的插槽（Slot）是一种可以让父组件向子组件传递内容的机制。插槽可以让开发者将组件的结构和内容分离开来，从而实现更好的可维护性和复用性。

在Vue中，插槽通过标签实现。具体用法如下：

单个插槽

在子组件中使用一个插槽时，可以在组件模板中添加一个标签。这个插槽可以用来接收来自父组件的内容，如下所示：

<!-- 子组件 -->
<template><div><h2>子组件标题</h2><slot></slot></div>
</template><!-- 父组件 -->
<template><div><child-component><p>父组件插入的内容</p></child-component></div>
</template>

在这个例子中，父组件中的

标签将会被插入到子组件的标签中。

具名插槽

如果子组件中有多个插槽，可以使用 name 属性给插槽取一个名字，从而让父组件可以选择往哪个插槽中插入内容，如下所示：

<!-- 子组件 -->
<template><div><h2>子组件标题</h2><slot name="content"></slot><slot name="footer"></slot></div>
</template><!-- 父组件 -->
<template><div><child-component><template v-slot:content><p>父组件插入的内容</p></template><template v-slot:footer><button>按钮</button></template></child-component></div>
</template>

在这个例子中，子组件中有两个插槽，分别被命名为 content 和 footer。在父组件中，可以使用标签和 v-slot 指令来向指定的插槽中插入内容。

作用域插槽

有时候父组件不仅要向子组件传递内容，还需要在传递的内容中包含一些数据，那么就可以使用作用域插槽（Scoped Slot）。

作用域插槽可以让子组件在渲染插槽内容时访问父组件的数据，并将这些数据作为插槽内容的一部分来渲染。具体用法如下：

<!-- 子组件 -->
<template><div><h2>子组件标题</h2><slot name="content" :data="data"></slot></div>
</template>
<!-- 父组件 -->
<template><div><child-component><template v-slot:content="slotProps"><p>父组件插入的内容</p><p>来自子组件的数据：{{ slotProps.data }}</p></template></child-component></div>
</template>