Vue官方文档解读系列(三)：slot作用域插槽

2023-12-29 14:12:00

前言

在上一篇文章中，我们已经学习了slot的基本用法。在本文中，我们将继续学习slot的进阶用法——作用域插槽。作用域插槽允许我们在插槽内访问父组件的数据和方法。这使得我们可以创建更灵活和可重用的组件。

什么是作用域插槽

作用域插槽是在slot标签内使用v-slot指令定义的。v-slot指令可以接收一个参数，该参数是作用域插槽的名称。在作用域插槽内，我们可以使用作用域插槽的名称来访问父组件的数据和方法。

<template>
  <div>
    <slot name="header" v-slot:header-content>
      <h1>{{ headerContent }}</h1>
    </slot>
    <slot name="body" v-slot:body-content>
      <p>{{ bodyContent }}</p>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerContent: 'This is the header content',
      bodyContent: 'This is the body content'
    }
  }
}
</script>

在这个例子中，我们定义了两个作用域插槽：header和body。在header插槽内，我们可以使用headerContent数据来渲染一个标题。在body插槽内，我们可以使用bodyContent数据来渲染一个段落。

作用域插槽的用法

作用域插槽可以用来创建更灵活和可重用的组件。例如，我们可以创建一个通用列表组件，该组件可以用来渲染任何类型的数据。

<template>
  <div>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['items'],
  data() {
    return {
      items: []
    }
  }
}
</script>

在这个例子中，我们创建了一个通用列表组件。该组件接收一个items属性，该属性是一个数组。在组件内，我们使用v-for指令来遍历items数组。对于数组中的每个元素，我们都会渲染一个item插槽。

我们可以使用这个通用列表组件来渲染任何类型的数据。例如，我们可以使用它来渲染一个用户列表、一个任务列表或者一个产品列表。

<template>
  <user-list :items="users"></user-list>
  <task-list :items="tasks"></task-list>
  <product-list :items="products"></product-list>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'John Doe', age: 25 },
        { name: 'Jane Doe', age: 30 }
      ],
      tasks: [
        { title: 'Task 1', description: 'This is task 1' },
        { title: 'Task 2', description: 'This is task 2' }
      ],
      products: [
        { name: 'Product 1', price: 100 },
        { name: 'Product 2', price: 200 }
      ]
    }
  }
}
</script>