详解Vue3中的插槽（slot）

news2024/11/17 9:58:32

在这里插入图片描述

本文主要介绍Vue3中的插槽（slot）。

一、在普通写法中使用插槽（slot）

作用域插槽

作用域插槽允许父组件向子组件传递数据，并在子组件中使用这些数据。在子组件中，可以使用特殊的v-slot指令来声明作用域插槽，并在插槽中访问父组件传递的数据。例如，以下是一个使用作用域插槽的示例：

<template>
  <div>
    <slot name="header" :message="message"></slot>
    <slot></slot>
  </div>
</template>

在父组件中，可以使用v-slot指令来为作用域插槽指定具体的内容。例如，以下是一个使用作用域插槽的示例：

<template>
  <div>
    <my-component>
      <template v-slot:header="{ message }">
        <h1>{{ message }}</h1>
      </template>
      <p>This is the default content</p>
    </my-component>
  </div>
</template>

在以上示例中，父组件为子组件的作用域插槽header传递了一个对象{ message }，并在插槽中使用了这个传递的对象。

默认插槽

默认插槽是一种在子组件中定义的未命名的插槽。默认插槽不需要通过v-slot指令进行声明，而是可以直接在子组件的模板中使用<slot>元素。父组件中的内容会自动传递给默认插槽。例如，以下是一个使用默认插槽的示例：

<template>
  <div>
    <slot></slot>
  </div>
</template>

在父组件中，可以将内容放在子组件标签中，这些内容会自动传递给子组件的默认插槽。例如：

<template>
  <div>
    <my-component>
      <p>This content will be passed to the default slot</p>
    </my-component>
  </div>
</template>

在以上示例中，父组件的<p>标签中的内容会自动传递给子组件的默认插槽。

二、在setup写法中使用插槽：

在<script setup>语法中，可以使用defineProps定义父组件传递给子组件的props，可以使用slot插槽接收父组件传递的内容。

下面是一个示例，展示如何在<script setup>语法中使用slot插槽：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template #default>
      <p>This is the content passed from the parent component</p>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>Child Component</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

在上面的示例中，父组件ParentComponent.vue使用<ChildComponent>标签包裹了一段内容<p>This is the content passed from the parent component</p>，并将其放在<template #default>标签内。在子组件ChildComponent.vue中，使用<slot></slot>标签定义了一个插槽，用来接收父组件传递的内容。在运行时，父组件的内容会被渲染到<slot></slot>处。

注意：<script setup>是Vue 3.2及以上版本中引入的新特性，需要使用Vue编译器进行编译才能正常使用。

Vue3中的插槽是一种非常强大的机制，它可以帮助我们更好地组织和复用组件。无论是作用域插槽还是默认插槽，都可以提高组件的灵活性和可复用性。

注意事项

在使用插槽（slot）时，Vue 3中有一些需要注意的地方：

新的插槽语法：Vue 3中引入了一种新的插槽语法，使用<slot>标签来定义插槽，而不再使用<template v-slot>或<template v-slot:default>。使用新的插槽语法可以使代码更加简洁和易懂。
默认插槽：在Vue 2中，插槽默认被称为<slot>，而在Vue 3中，默认插槽可以直接使用<slot>进行定义，无需添加任何参数。
具名插槽：在Vue 3中，通过在<slot>标签上使用name属性来定义具名插槽。父组件可以通过<template v-slot:slotName>或<template #slotName>语法来指定具名插槽。
多个插槽内容：在Vue 3中，为了支持多个插槽内容，可以为插槽定义多个<template>标签，并使用v-slot或#来指定对应的插槽名称。
作用域插槽：在Vue 3中，作用域插槽（scoped slot）被称为<template v-slot:slotName="slotProps">或<template #slotName="slotProps">，其中slotProps是一个对象，包含了父组件传递给插槽的属性和方法。
插槽传递数据：在Vue 3中，可以使用v-bind或:将数据传递给插槽。例如，可以使用<slot :data="data">来将data属性传递给插槽，然后在插槽内部使用<template v-slot:default="{ data }">来接收该属性。
默认插槽内容：在Vue 3中，可以使用<slot>标签内的默认内容作为默认插槽的内容。如果父组件没有传递内容给默认插槽，那么默认内容将会被渲染。
动态插槽名称：Vue 3支持动态插槽名称，可以使用表达式作为插槽的名称。例如，可以使用<slot :name="slotName">来动态指定插槽的名称。