什么是 Vue Slot？-允许你在子组件里指定某个位置-如何使用Vue的slot

作者：机器人技术佬 | 发布时间：2025-06-20 |

什么是 Vue Slot？

Vue Slot 是 Vue.js 框架中的一个特性，它就像一个占位符，允许你在子组件里指定某个位置，然后在父组件中使用这个子组件时，可以把内容填充到这个位置上。这样，你就可以在多个地方复用同一个组件，同时展示不同的内容。

Vue Slot 的基本使用方法

要使用 Vue Slot，首先在子组件里定义一个插槽位置，然后在父组件中使用子组件，并指定内容填充到哪个插槽。

子组件	父组件
`<template slot="slotName">内容</template>`	`<ChildComponent><template v-slot:slotName>内容</template></ChildComponent>`

具名插槽

具名插槽允许你为组件定义多个插槽，并通过名称来区分它们。这样，在父组件中就可以指定将内容填充到哪个插槽。

子组件	父组件
`<template slot="header">头部内容</template><template slot="footer">底部内容</template>`	`<ChildComponent><template v-slot:header>内容</template><template v-slot:footer>内容</template></ChildComponent>`

作用域插槽

作用域插槽允许子组件向父组件传递数据，这样插槽中的内容就可以访问到这些数据。

子组件	父组件
`<template slot-scope="props">{{ props.item }}</template>`	`<ChildComponent><template v-slot:default="slotProps">{{ slotProps.item }}</template></ChildComponent>`

默认插槽内容

如果父组件没有提供插槽内容，子组件可以定义默认插槽内容，这样在父组件没有提供内容时，会显示默认内容。

<template slot="default">默认内容</template>

综合实例

下面是一个使用默认插槽、具名插槽和作用域插槽的综合实例。



  <template>

    <div>

      <ChildComponent>

        <template v-slot:header>这里是头部内容</template>

        <template v-slot:footer>这里是底部内容</template>

        <template v-slot:default>这里是默认内容</template>

      </ChildComponent>

    </div>

  </template>

Vue Slot 是一个强大的工具，可以让你更灵活地复用组件，并展示不同的内容。通过学习这些用法，你可以更好地利用 Vue 的组件系统，提升代码的可维护性和可复用性。