如何在Vue.js中使用作用域组件槽

介绍

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

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

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

先决条件

如果您想继续阅读本文，您将需要：

熟悉设置 Vue.js 项目和使用父组件和子组件将是有益的。

笔记：

在 Vue 2.6.0 中，槽的语法已更改。本教程将介绍 2.6.0 语法。

本教程已使用 Node v15.10.0、npm v7.6.0 和 vue v2.6.11 进行了验证。

使用作用域组件槽

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

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

子组件.vue

<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 内容中使用这些属性，请创建一个与子组件的 <slot> 元素绑定的 <template> 元素。

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

例如，"firstScope"，传递到 <slot> 的属性将作为 模板:FirstScope.exampleProperty 访问，而 secondScope" 将作为 模板:SecondScope.exampleProperty 访问。

以下是引用 defaultSlotText 和 namedSlotText 的 ParentComponent 示例：

父组件.vue

<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 主题页面以获取练习和编程项目。