Vue 中插槽的作用和用法

原创已于 2025-04-02 16:10:08 修改 · 727 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2024-08-28 16:25:29 首次发布

vue 专栏收录该内容

8 篇文章

订阅专栏

一、Vue 的插槽作用和用法

Vue 的插槽（slot）是一种组件的设计模式，它允许组件的使用者在组件内部插入内容。插槽可以理解为组件的占位符，用于在不同的情况下插入不同的内容。

插槽的作用主要有以下几个方面：

复用组件：插槽可以使组件更加灵活和可复用，使用者可以根据需要在插槽中插入不同的内容，而不需要修改组件的源代码。
定制化：插槽可以用来定制组件的外观和功能。通过插槽，使用者可以自定义组件中特定的部分，从而满足自己的需求。
组件通信：插槽也可以用于组件之间的通信。通过插槽，父组件可以向子组件传递数据或者方法，子组件可以通过插槽接收并使用这些数据或方法。

插槽的用法主要有以下几种方式：

默认插槽：通过在组件模板中使用 <slot></slot> 标签来定义一个默认插槽。使用者可以在组件标签中插入内容，这些内容将会替换掉默认插槽的内容。
具名插槽：通过在组件模板中使用 <slot name="xxx"></slot> 标签来定义一个具名插槽。使用者可以使用 <template v-slot:xxx></template> 或者 <slot name="xxx"></slot> 来插入内容到具名插槽中。
作用域插槽：通过在插槽中使用 <slot></slot> 标签的同时添加一个属性，可以将父组件中的数据或方法传递到插槽中，并且可以在插槽中使用这些数据或方法。

<template>
  <div>
    <slot :data="data" :method="method"></slot>
  </div>
</template>

使用者可以在插槽中使用插槽 props 进行自定义操作：

<template v-slot:default="{data, method}">
  <div>{{ data }}</div>
  <button @click="method">Click</button>
</template>

以上是插槽的基本用法，除此之外，插槽还可以嵌套使用，以及可以通过作用域插槽实现动态插槽等高级用法。

二、Vue 3中的插槽与Vue 2中的插槽有一些不同。以下是Vue 3中插槽的一些特点：

默认插槽：Vue 2中的默认插槽使用<slot></slot>语法，而在Vue 3中，可以直接使用<slot></slot>或<slot />语法来定义默认插槽。
具名插槽：Vue 3中的具名插槽使用新的语法<slot name="slotName"></slot>。在父组件中，可以使用<template v-slot:slotName>或<template #slotName>来指定具名插槽的内容。
插槽传递变量：Vue 3中可以将变量传递到插槽中。使用新的语法<slot :varName="value"></slot>来传递变量。在父组件中，可以通过<template v-slot:default="slotProps">来接收插槽中的变量，并使用slotProps.varName来访问。
插槽的默认值：Vue 3中的插槽可以有默认值，使用<slot :varName="value">default content</slot>来设置插槽的默认值。如果父组件没有提供插槽内容，则会使用默认值。
动态插槽名：Vue 3中的插槽名可以是动态的，使用[slotName]的形式来指定动态插槽名。

总的来说，Vue 3中的插槽语法更加简洁和灵活，提供了更多的功能和选项。

三、 Vue 3中插槽的使用

在Vue 3中，插槽的使用方式有一些变化。下面是插槽在Vue 3中使用的示例：

单个插槽

// 父组件 Hello.vue
<template>
  <div>
    <h2>父组件</h2>
    <Child>
      <p>这是父组件插槽的内容</p>
    </Child>
  </div>
</template>

// 子组件 Child.vue
<template>
  <div>
    <h3>子组件</h3>
    <slot></slot>
  </div>
</template>

具名插槽

// 父组件 Hello.vue
<template>
  <div>
    <h2>父组件</h2>
    <Child>
      <template #header>
        <h4>这是具名插槽的头部内容</h4>
      </template>
      <template #footer>
        <p>这是具名插槽的底部内容</p>
      </template>
    </Child>
  </div>
</template>

// 子组件 Child.vue
<template>
  <div>
    <h3>子组件</h3>
    <header>
      <slot name="header"></slot>
    </header>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽（插槽传递数据）

// 父组件 Hello.vue
<template>
  <div>
    <h2>父组件</h2>
    <Child>
      <template #default="slotProps">
        <p>{{ slotProps.message }}</p>
      </template>
    </Child>
  </div>
</template>

// 子组件 Child.vue
<template>
  <div>
    <h3>子组件</h3>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是传递给插槽的数据'
    }
  }
}
</script>

这是一些在Vue 3中使用插槽的示例。请注意，Vue 3中的插槽语法略有不同于Vue 2，所以需要注意语法的变化。