介绍

虽然组件槽满足某些用例，但在其他情况下，您希望槽内的模板能够访问来自承载槽内容的子组件的数据。例如，如果您尝试在容器中允许自定义模板，同时仍保留对这些容器的数据属性的访问权限，您将需要使用作用域槽。

作用域组件槽是 Vue 2.1.0 中引入的一个特性。它们允许您将子组件的属性传递到作用域插槽中并从父组件访问它们。有点像反向属性传递。

在本教程中，您将探索一个示例 Vue 项目，该项目的父组件和子组件与作用域组件槽共享属性。

先决条件

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

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

笔记：

• 在 Vue 2.1.0 中，scope引入了该属性。
• 在 Vue 2.5.0 中，slot-scope引入了该属性。

在Vue 2.6.0 中，插槽的语法发生了变化。本教程将介绍 2.6.0 语法。

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

使用作用域组件槽

要创建作用域组件<slot>，您首先需要将属性从子组件传递到命名或未命名的插槽中。

下面是一个ChildComponent包含未命名和命名<slot>元素的示例：

<template>
  <div>
    <p>This is a child component.</p>
    <div>
      <p>Default Slot</p>
      <slot v-bind:text="defaultSlotText"></slot>
    </div>
    <div>
      <p>Named Slot</p>
      <slot name="namedSlot" v-bind:text="namedSlotText"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSlotText: "Default Slot Text",
      namedSlotText: "Named Slot Text"
    }
  }
}
</script>

然后，要在父组件的v-slot内容中使用这些属性，请创建一个<template>与子组件元素相关联的<slot>元素。

向<template>元素添加一个属性并将其设置为您希望从中访问范围属性的名称。这实质上为该模板内的任何内容创建了一个局部变量，允许您访问它，就像它在父级的范围内一样。

例如，"firstScope"传递给 的属性<slot>将可以访问，{{firstScope.exampleProperty}}而 whilesecondScope"将作为 访问{{secondScope.exampleProperty}}。

下面是一个ParentComponent引用defaultSlotTextand的示例namedSlotText：

<template>
  <div>
    <p>This is a parent component.</p>
    <ChildComponent>
      <template v-slot="defaultSlotText">
        <p>{{defaultSlotText.text}}</p>
      </template>
      <template v-slot:namedSlot="namedSlotText">
        <p>{{namedSlotText.text}}</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

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

Output
<div>
  <p>This is a parent component.</p>
  <div>
    <p>This is a child component.</p>
    <div>
      <p>Default Slot</p>
      <p>Default Slot Text</p>
    </div>
    <div>
      <p>Named Slot</p>
      <p>Named Slot Text</p>
    </div>
  </div>
</div>

在defaultSlotText.text和namedSlotText.text从子组件到父组件传递。

结论

在本教程中，您探索了一个示例 Vue 项目，其中的父组件和子组件与作用域插槽共享属性。

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