深入理解 Vue.js 中的插槽 Slot用法

本文链接：https://blog.youkuaiyun.com/chenchuang0128/article/details/136752273

本文详细介绍了Vue.js中的插槽功能，包括默认插槽、具名插槽、动态插槽名、插槽后备内容和作用域插槽，帮助开发者提升组件复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Vue.js 中，插槽 (Slot) 是一个非常重要且强大的特性。它允许我们在组件中定义可供父组件填充的区域，从而实现更灵活的组件复用和布局。在这篇技术博客论文中，我们将深入探讨 Vue.js 中的插槽，包括默认插槽、具名插槽、动态插槽名、插槽后备以及作用域插槽。

一、基本概念

在 Vue.js 中，插槽可以看作是组件的一块 HTML 模板，这块模板显示不显示以及怎样显示由父组件来决定。插槽的存在使得父组件可以动态地决定子组件的内容，从而提高了组件的复用性和灵活性。

二、默认插槽

默认插槽是最基本的插槽类型。当子组件中没有定义任何插槽时，父组件中的内容将直接渲染到子组件的默认插槽中。例如：

<template> <div> <MyComponent> <p>这是父组件的内容</p > </MyComponent> </div></template> <script>import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, },};</script>

在上面的示例中，<p>这是父组件的内容</p > 将会渲染到 MyComponent 组件的默认插槽中。

三、具名插槽

具名插槽允许我们为插槽指定一个名称，从而在子组件中可以通过这个名称来引用插槽。例如：

<template> <div> <MyComponent> <template #default> <p>这是默认插槽的内容</p > </template> <template #header> <h1>这是具名插槽 header 的内容</h1> </template> </MyComponent> </div></template> <script>import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, },};</script>

在上面的示例中，我们定义了一个具名插槽 header，并在父组件中通过 <template #header> 来定义该插槽的内容。

四、动态插槽名

动态插槽名允许我们根据某些条件动态地决定使用哪个具名插槽。这可以通过使用 v-bind 指令来实现。例如：

<template> <div> <MyComponent :slot="currentSlot"> <template #default> <p>这是默认插槽的内容</p > </template> <template #header> <h1>这是具名插槽 header 的内容</h1> </template> <template #footer> <h2>这是具名插槽 footer 的内容</h2> </template> </MyComponent> </div></template> <script>import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, data() { return { currentSlot: 'header', }; },};</script>

在上面的示例中，我们使用 :slot="currentSlot" 将具名插槽的名称动态地绑定到 currentSlot 数据属性上。

五、插槽后备内容

有时候，我们可能希望在没有提供插槽内容的情况下显示一些默认的后备内容。这可以通过使用 <slot> 元素的 default 属性来实现。例如：

<template> <div> <MyComponent> <template #default> <p>这是默认插槽的内容</p > </template> </MyComponent> </div></template> <script>import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, },};</script>

在上面的示例中，如果没有提供任何具名插槽的内容，那么 MyComponent 将会显示 <p>这是默认插槽的内容</p > 作为后备内容。

六、作用域插槽

作用域插槽允许我们在父组件中定义一个具名插槽，并通过传递属性来动态地改变插槽的内容。这些属性在父组件的作用域内是可用的。例如：

<template>  <div>    <MyComponent>      <template #default scope="props">        <p>{{ props.message }}</p >      </template>    </MyComponent>  </div></template>

<script>import MyComponent from './MyComponent.vue';

export default {  components: {    MyComponent,  },};</script>