在 Vue 组件中动态添加内容：标准插槽和具名插槽的指南

vue.js

2024-03-14 04:59:06

在 Vue 组件中动态添加内容的指南

导言

Vue 组件是强大的构建块，使你能够构建灵活、可重用的用户界面。通过使用插槽，你可以轻松地向 Vue 组件添加动态内容，使它们适应各种场景。本文将引导你了解在 Vue 组件中添加内容的过程，包括使用标准插槽和具名插槽。

标准插槽

什么是标准插槽？

标准插槽是无名插槽，允许你向组件添加任何内容，无论其类型如何。它由 <slot> 元素表示，可插入到组件模板中。

如何使用标准插槽？

在父组件中，将内容包裹在 <component-name> 组件标签中。
在子组件模板中，使用 <slot> 元素指定要插入内容的位置。

示例：

// 父组件
<template>
  <div>
    <my-component>
      <h1>This is the content I want to add to the component.</h1>
    </my-component>
  </div>
</template>

// 子组件
<template>
  <div>
    <slot></slot>
  </div>
</template>

具名插槽

什么是具名插槽？

具名插槽允许你指定内容插入的位置。每个具名插槽都有一个唯一的名称，你可以在父组件中使用该名称将内容定向到该插槽。

如何使用具名插槽？

在父组件中，使用 <component-name> 组件标签并指定要插入内容的具名插槽。
在子组件模板中，使用 v-slot:slot-name 语法为每个插槽指定一个插槽。

示例：

// 父组件
<template>
  <div>
    <my-component>
      <template v-slot:title>
        <h1>This is the title I want to add to the component.</h1>
      </template>
      <template v-slot:content>
        <p>This is the content I want to add to the component.</p>
      </template>
    </my-component>
  </div>
</template>

// 子组件
<template>
  <div>
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>