Skip to content

Commit 2d23266

Browse files
docs (#151): add slots unification section to migration guide (#159)
* docs (#151): add slots unification section to migration guide * fix: typo Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
1 parent e69e0eb commit 2d23266

File tree

2 files changed

+62
-0
lines changed

2 files changed

+62
-0
lines changed

src/.vuepress/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ const sidebar = {
9494
'migration/functional-components',
9595
'migration/async-components',
9696
'migration/custom-directives',
97+
'migration/slots-unification',
9798
'migration/keycode-modifiers'
9899
]
99100
},
+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Slots Unification
2+
3+
## Overview
4+
5+
This change unifies normal and scoped slots in v3.
6+
7+
Here is a quick summary of what has changed:
8+
9+
- `this.$slots` now exposes slots as functions
10+
- **BREAKING**: `this.$scopedSlots` is removed
11+
12+
For more information, read on!
13+
14+
## Previous Syntax
15+
16+
When using the render function, i.e., `h`, v2 used to define the `slot` data property on the content nodes.
17+
18+
```js
19+
// 2.x Syntax
20+
h(LayoutComponent, [
21+
h('div', { slot: 'header' }, this.header),
22+
h('div', { slot: 'content' }, this.content)
23+
])
24+
```
25+
26+
In addition, when referencing scoped slots, they could be referenced using the following syntax:
27+
28+
```js
29+
// 2.x Syntax
30+
this.$scopedSlots.header
31+
```
32+
33+
## Current Syntax
34+
35+
In v3, render functions will have a `slots` option where they can be defined instead.
36+
37+
```js
38+
// 3.x Syntax
39+
h(LayoutComponent, {
40+
slots: {
41+
header: () => h('div', this.header),
42+
content: () => h('div', this.content)
43+
}
44+
})
45+
```
46+
47+
And when you need to reference scoped slots programmatically, they are now unified into the `$slots` option.
48+
49+
```js
50+
// 2.x Syntax
51+
this.$scopedSlots.header
52+
53+
// 3.x Syntax
54+
this.$slots.header
55+
```
56+
57+
## Migration Strategy
58+
59+
A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step:
60+
61+
1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in v3.

0 commit comments

Comments
 (0)