【Vue3】作用域插槽

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用作用域插槽。

Vue 中的插槽包含三类：

• 默认插槽
• 具名插槽
• 作用域插槽

作用域插槽解决的问题是：数据定义在插槽所在的子组件中，但是数据的展现方式由父组件控制。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 在【Vue3】默认插槽 基础上修改带插槽的功能组件。

<template>
    <div class="store">
        <h2>电影</h2>
        <hr>
        <slot :films="films" :writer="writer"></slot>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const films = reactive([
  { id: '001', name: '哈利波特与魔法石'},
  { id: '002', name: '哈利波特与密室'},
  { id: '003', name: '哈利波特与阿兹卡班的囚徒'},
  { id: '004', name: '哈利波特与凤凰社'},
])
const writer = ref('J·K·罗琳')
</script>

<style scoped lang="scss">
.store {
    background-color: green;
    box-shadow: 0 0 10px;
    color: white;
    padding: 10px;
    width: 300px;
}
</style>

数据全部定义在此功能组件中，且将数据通过 <slot> 标签传递给父组件。

2> 修改 Vue 根组件 src/App.vue，引用自定义功能组件。

<template>
  <div class="root">
    <h1 ref="title">App组件</h1>
    <div class="stores">
      <Store v-slot="data">
        <h3>作家：{{ data.writer }}</h3>
        <ul>
          <li v-for="film in data.films" :key="film.id">{{ film.name }}</li>
        </ul>
      </Store>
      <Store v-slot="data">
        <h3>编剧：{{ data.writer }}</h3>
        <ol>
          <li v-for="film in data.films" :key="film.id">{{ film.name }}</li>
        </ol>
      </Store>
    </div>
  </div>
</template>

<script setup lang="ts">
import Store from './components/Store.vue'
</script>

<style scoped lang="scss">
.root {
  background-color: orange;
  box-shadow: 0 0 10px;
  padding: 20px;
  h1 {
    text-align: center;
  }
  .stores {
    display: flex;
    justify-content: space-evenly;
  }
}
</style>

父组件通过子组件标签的 v-slot="data" 属性接收来自子组件的数据，如果是具名作用域插槽，则格式为 v-slot:插槽名称="data" 或 #插槽名称="data"。

3> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/。