分享下Vue 插槽指南，收藏下吧！

插槽是 Vue 中组件将内容注入子组件的另一种方式。这是使用模板代码来完成的。

就最终输出而言，插槽执行与 Vue 中的 props 类似的功能 - 将数据从父组件获取到子组件。槽还有助于创建可重用的代码。

然而，props 将数据值传递给组件，而 slot 只能传递直接模板代码。我认为根据具体情况，这会带来一些好处：

• 您的子组件更具可重用性 - 您可以向其传递不同的组件，而不必担心格式/数据值的一致性

• 它更加灵活 ——你不必总是填充每个值，而使用 props，你必须担心使用以下方法检查值是否存在v-if

• 这可能是个人的事情，但我认为子组件看起来更具可读性

我认为了解插槽的最佳方法就是看一个如何使用它们以及实际发生的情况的示例。

Vue 插槽概述

从插槽开始是一个典型的用例，我们只需slot在子组件中声明 a 并使用父组件注入内容。

让我们来看看。首先，让我们设置一个名为的父组件MyContainer.vue

MyContainer.vue

<template>

    <div>

        <my-button>Click Me!</my-button>

    </div>

</template>

接下来，让我们设置一个子组件MyButton.vue。

MyButton.vue

<template>

   <div>

     <slot></slot>

   </div>

</template>

当 MyButton.vue 渲染时，<slot>将被替换为Click Me! 来自父级的内容。

您可以从父组件传递任何类型的模板，它不必只是文本。它可以是 Font Awesome 图标、图像，甚至是其他组件。

命名插槽

组织基于插槽的组件系统的最佳方法是命名插槽。这样您就可以确保将内容注入到组件的正确部分。

正如您所期望的，这是通过向子组件中添加名称属性来完成的slot。然后，要从父级添加内容，您只需创建另一个<template>元素并将名称传递到名为的属性中v-slot

让我们看看实际情况。

BoxElement.vue

<template>

    <div>

        <slot name="header"></slot>

        <slot name="content"></slot>

    </div>

</template>

然后是父组件：

<template>

  <div>

    <box-element>

      <template v-slot:header>

        This will be injected as the header slot.

      </template>

      <template v-slot:content>

        This will be the content of the element

      </template>

    </box-element>

  </div>

</template>

注意：如果插槽未命名。它的名字只有default

当创建需要多个槽的组件时，命名槽非常有用。

例如，假设我们想要创建一个Article.vue组件，我们可能需要为标题、主要内容区域和注释提供单独的插槽。

对于三个不同的区域，我们需要一种方法来区分它们，否则当我们尝试从父组件注入内容时，我们的 Vue 应用程序将不知道我们要定位哪个插槽。

这就是命名槽变得非常有用的地方。

因此，正如我们所讨论的，命名槽可以帮助您使用多个槽。但为什么这对我们 Vue 开发人员有用呢？

简单来说，它可以让我们更好地组织开发代码，也可以让我们编写更具可扩展性的代码。

通过将不同的部分分隔成各自的槽，我们可以轻松地看到最终应用程序的每个部分被添加到 DOM 中的位置。

就我个人而言，我认为最重要的部分是它允许我们在代码上使用插槽，使样式设计变得更加容易。在我们的示例中，我们的Article.vue子组件只有三个插槽，但在真实的应用程序中，插槽看起来更像这样，以便我们的组件可以向每个部分添加 CSS 样式。

<template>

  <div>

    <div class="title">

      <h1>

        <slot name="title"> Fallback Title </slot>

      </h1>

    </div>

    <div class="content">

      <p>

        <slot name="content"> Fallback Content </slot>

      </p>

    </div>

    <div class="comments">

      <slot name="comments"> Fallback Comments </slot>

    </div>

  </div>

</template>

在这个例子中，更容易理解为什么我们需要多个插槽。<div>由于我们注入的内容是由不同的、<p>和 DOM 元素相互分隔的。在一个槽中传递所有这些信息是不可能的。

下面是我们的最终组件在浏览器中的外观示例。

如果我们检查 DOM，我们可以看到使用 v-slot 的模板正在正确的位置正确插入内容。

所有这些意味着，如果我们想在该组件中使用插槽，我们将需要多个插槽。

如何使用命名插槽

在 Vue 中使用命名槽有两个步骤：

• name使用属性从子组件命名我们的插槽

• v-slot使用指令从父组件向这些命名槽提供内容

默认情况下，当我们没有为插槽提供显式名称属性时（如上面的示例所示），它的名称为default.

为了给我们的槽命名，<slot>元素有一个特殊的name属性，让我们可以区分多个槽。

在我们的Article.vue示例中，我们可以这样命名三个插槽。

<template>

  <div>

    <slot name="title"> Fallback Title </slot>

    <slot name="content"> Fallback Content </slot>

    <slot name="comments"> Fallback Comments </slot>

  </div>

</template>

然后，在父组件中，我们可以使用元素上的 v-slot 指令指定要将内容注入到哪个槽中<template>。

因此，无论我们在哪里使用 Vue 命名槽声明组件，都可以创建三个<template>元素，每个元素对应一个槽。

<template>

  <div>

    <child-component>

      <template> Our Title </template>

      <template> Our Content </template>

      <template> Our Comments </template>

    </child-component>

  </div>

</template>

如果我们保存并查看此内容，您会发现我们仍然可以看到后备内容：

这是因为我们的模板当前并未针对任何实际定义的插槽！

为了解决这个问题，使用v-slot指令，我们将像这样传入每个槽的名称，确保该名称与我们在子组件中声明的名称完全匹配。

<template>

  <div>

    <child-component>

      <template v-slot:title> Our Title </template>

      <template v-slot:content> Our Content </template>

      <template v-slot:comments> Our Comments </template>

    </child-component>

  </div>

</template>

好吧，今天先分享到这里，后面我们继续分享，请关注我们吧。