介绍

通常，您需要允许父 Vue 组件在子组件中嵌入任意内容。Vue 提供了一种使用slot来实现这一点的方法。

注意：如果您来自 Angular 背景，这是一个类似于transclusion或content projection 的概念。

在本教程中，您将探索一个示例 Vue 项目，该项目具有与插槽共享内容的父组件和子组件。

先决条件

如果你想跟随这篇文章，你需要：

• 熟悉设置 Vue.js 项目和使用父组件和子组件会有所帮助。

本教程已通过 Node v15.10.0、npmv7.6.0 和vuev2.6.11 验证。

使用插槽

要允许父组件将 DOM 元素传递给子组件，请<slot>在子组件内提供一个元素。

下面是一个ChildComponent包含 a的示例<slot>：

<template>
  <div>
    <p>This is the child component.</p>
    <slot></slot>
  </div>
</template>

这是一个ParentComponent填充ChildComponent内容的示例：

<template>
  <div>
    <p>This is the parent component.</p>
    <ChildComponent>
      <p>This is injected content from the parent component.</p>
      <p>It can still bind to data in the parent's scope: {{myVariable}}</p>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myVariable: `Parent Variable`
    }
  }
}
</script>

在 Web 浏览器中查看应用程序将产生以下结果：

Output
<div>
  <p>This is the parent component.</p>
  <div>
    <p>This is the child component.</p>
    <p>This is injected content from the parent component.</p>
    <p>It can still bind to data in the parent's scope: Parent Variable</p>
  <div>
</div>

来自父组件的内容和数据被注入到子组件中。

提供后备内容

如果父组件没有向子组件的 注入任何内容<slot>，子组件将渲染其<slot>标签内的任何元素：

这是一个ChildComponent带有后备内容的示例：

<template>
  <div>
    <p>This is the child component.</p>
    <slot>
      <p>Fallback Content</p>
    </slot>
  </div>
</template>

这是一个ParentComponent具有两个ChildComponents的示例– 一个包含插槽内容，一个没有：

<template>
  <div>
    <p>This is the parent component with slot data.</p>
    <ChildComponent>
      <p>Slot Content</p>
    </ChildComponent>
    <p>This is the parent component without slot data.</p>
    <ChildCmponent></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

在 Web 浏览器中查看应用程序将产生以下结果：

Output
<div>
  <p>This is the parent component with slot data.</p>
  <div>
    <p>This is the child component.</p>
    <p>Slot Content</p>
  <div>
  <p>This is the parent component without slot data.</p>
  <div>
    <p>This is the child component.</p>
    <p>Fallback Content</p>
  <div>
</div>

当父组件不提供插槽内容时，会出现回退内容。

注意：如果<slot>子组件中没有元素，<template>则父组件中的任何内容都将被静默丢弃。

这完成了对使用<slot>和回退的简要介绍。

使用命名槽

用一个<slot>元素来注入内容可以满足一些用例。但是，您可能还有其他需要使用多个<slot>元素的用例。使用带有命名插槽的Vue 可以实现这一点。

命名插槽是<slot>具有 name 属性的元素，以允许命名空间内容注入：

<slot name="slotName"></slot>

考虑一个例子组件，具有名为插槽main和aside：

<template>
  <div>
    <main>
      <slot name="main"></slot>
    </main>
    <aside>
      <slot name="aside"></slot>
    </aside>
    <slot></slot>
  </div>
</template>

父组件填充main和aside插槽。不引用命名槽的内容填充空槽：

<template>
  <div>
    <ChildComponent>
      <template v-slot:main>
        <p>Custom Main</p>
      </template>
      <template v-slot:aside>
        <p>Custom Aside</p>
      </template>
      <div>
        <p>Custom Content</p>
      </div>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

注意：在 Vue 2.6.0 之前，你会使用slot属性。它已被该v-slot指令取代。Vue 3 将弃用并最终删除slot属性。

在 Web 浏览器中查看应用程序将产生以下结果：

Output
<div>
  <div>
    <main>
      <p>Custom Main</p>
    </main>
    <aside>
      <p>Custom Aside</p>
    </aside>
    <p>Custom Errata</p>
  <div>
</div>

这完成了对使用命名插槽的简要介绍。

结论

在本教程中，您探索了一个 Vue 项目，其中包含与插槽共享内容的父组件和子组件示例。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。