插槽的用法

2024-01-25 03:33:46

什么是插槽

插槽是一个用于在组件中放置动态内容的占位符。插槽可以用 <slot> 标签定义，也可以用 v-slot 指令定义。

体验插槽的基础用法

没有插槽的内容会被丢弃

如果没有为插槽提供任何内容，那么插槽中的内容将被丢弃。例如，以下组件定义了一个标题插槽和一个正文插槽：

<template>
  <div>
    <h1><slot name="title"></slot></h1>
    <p><slot name="body"></slot></p>
  </div>
</template>

如果我们使用这个组件如下：

<my-component>
  <h1>My Title</h1>
</my-component>

那么只有标题插槽的内容会被显示，正文插槽的内容将被丢弃。

后备内容

您可以使用 default 插槽来提供后备内容。后备内容将在没有为插槽提供任何内容时显示。例如，我们可以将上面的组件修改如下：

<template>
  <div>
    <h1><slot name="title"></slot></h1>
    <p><slot name="body">This is the default body content.</slot></p>
  </div>
</template>

现在，如果我们使用这个组件如下：

<my-component>
  <h1>My Title</h1>
</my-component>

那么标题插槽的内容和后备内容都会显示。

具名插槽

您可以使用 name 属性来为插槽命名。这将允许您为不同的插槽提供不同的内容。例如，我们可以将上面的组件修改如下：

<template>
  <div>
    <h1><slot name="title"></slot></h1>
    <p><slot name="body"></slot></p>
    <div><slot name="footer"></slot></div>
  </div>
</template>

现在，我们可以使用这个组件如下：

<my-component>
  <template #title>
    <h1>My Title</h1>
  </template>
  <template #body>
    <p>This is the body content.</p>
  </template>
  <template #footer>
    <div>This is the footer content.</div>
  </template>
</my-component>

这样，我们将为标题、正文和页脚插槽分别提供不同的内容。

为具名插槽提供内容

为具名插槽提供内容有两种方法：

您可以使用 template 标签来定义插槽的内容。
您可以使用 v-slot 指令来定义插槽的内容。

使用 template 标签来定义插槽的内容如下：

<template #title>
  <h1>My Title</h1>
</template>

使用 v-slot 指令来定义插槽的内容如下：

<div v-slot:title>
  <h1>My Title</h1>
</div>

作用域插槽

作用域插槽允许您将数据从父组件传递到子组件。这可以通过在插槽的模板中使用 slot-scope 属性来实现。例如，我们可以将上面的组件修改如下：

<template>
  <div>
    <h1 v-for="item in items" :key="item.id"><slot name="title" :item="item"></slot></h1>
    <p><slot name="body"></slot></p>
    <div><slot name="footer"></slot></div>
  </div>
</template>

现在，我们可以使用这个组件如下：

<my-component>
  <template #title="{ item }">
    <h1>{{ item.title }}</h1>
  </template>
  <template #body>
    <p>This is the body content.</p>
  </template>
  <template #footer>
    <div>This is the footer content.</div>
  </template>
</my-component>

这样，我们将把 items 数组中的每个项目传递到标题插槽。

结构作用域插槽的prop

结构作用域插槽的prop是通过slot-scope属性来传入的，我们可以使用这些prop来访问父组件的数据。例如，我们可以将上面的组件修改如下：

<template>
  <div>
    <h1 v-for="item in items" :key="item.id"><slot name="title" :item="item" :prop1="prop1"></slot></h1>
    <p><slot name="body"></slot></p>
    <div><slot name="footer"></slot></div>
  </div>
</template>

现在，我们可以使用这个组件如下：

<my-component :prop1="prop1">
  <template #title="{ item }">
    <h1>{{ item.title }}</h1>
  </template>
  <template #body>
    <p>This is the body content.</p>
  </template>
  <template #footer>
    <div>This is the footer content.</div>
  </template>
</my-component>