Vue 3 迁移策略笔记—— 第22节：Slots 的统一

前言

本笔记主要基于官方文档《迁移策略—— Slot 统一》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

知识储备

如果你并不属性 Vue 的渲染函数，需先了解一下知识：

• 《渲染函数 & JSX——基础》
• 《渲染函数&JSX——createElement 参数》
• 《vm.$slots》
• 《this.$scopedSlots 》

概述

Vue 3.x 统一了$slots 和 $scopedSlots:

• this.$slots 作为函数对位暴露
• 移除 this.$scopedSlots

Vue 2.x 的 $slots 和 $scopedSlots

Vue 2.x，当我们用渲染函数书写组件时，就需要用到$slots 和 $scopedSlots。

你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)
}

也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：

props: ['message'],
render: function (createElement) {
	// `<div><slot :text="message"></slot></div>`
  return createElement('div', [
     this.$scopedSlots.default({
         text: this.message
     })
  ])
}

摘抄自——《渲染函数&JSX——插槽》

Vue 3.x 的 $slots 和 $scopedSlots

在 Vue 3.x, slots 被定义为当前节点的子节点且作为一个对象：

render: function (createElement) {
// `<div><slot name="header"></slot></div>`
return createElement('div',{}，{
	header: ()=> createElement('div')
	})
}

当你需要以编程方式引用作用域 slot 时，它们现在被统一到 $slots 选项中

// 2.x Syntax
this.$scopedSlots.header

// 3.x Syntax
this.$slots.header()

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听