Skip to content

Commit 706a8cd

Browse files
Fiv5wuzheqing
and
wuzheqing
authored
docs: Add migration guide for h rendering registered component (#1927) (#545)
* docs: Add migration guide for `h` rendering registered component (#1927) * fix: wording and code formatting. * chore: remove package-lock.json * fix: `resolveComponent` should within setup/render * fix: wording inconsistency Co-authored-by: wuzheqing <[email protected]>
1 parent b7b3202 commit 706a8cd

File tree

2 files changed

+45
-1
lines changed

2 files changed

+45
-1
lines changed

src/guide/migration/render-function-api.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,50 @@ In 3.x, the entire VNode props structure is flattened. Using the example from ab
128128
}
129129
```
130130

131+
## Registered Component
132+
133+
### 2.x Syntax
134+
135+
In 2.x, when a component has been registered, the render function would work well when passing the component's name as a string to the first argument:
136+
137+
```js
138+
// 2.x
139+
Vue.component('button-counter', {
140+
data: () => ({
141+
count: 0
142+
}),
143+
template: `
144+
<button @click="count++">
145+
Clicked {{ count }} times.
146+
</button>
147+
`
148+
})
149+
150+
export default {
151+
render(h) {
152+
return h('button-counter')
153+
}
154+
}
155+
```
156+
157+
### 3.x Syntax
158+
159+
In 3.x, with VNodes being context-free, we can no longer use a string ID to implicitly lookup registered components. Instead, we need to use an imported `resolveComponent` method:
160+
161+
```js
162+
// 3.x
163+
import { h, resolveComponent } from 'vue'
164+
165+
export default {
166+
setup() {
167+
const ButtonCounter = resolveComponent('button-counter')
168+
return () => h(ButtonCounter)
169+
}
170+
}
171+
```
172+
173+
For more information, see [The Render Function Api Change RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).
174+
131175
## Migration Strategy
132176

133177
### Library Authors

src/guide/render-function.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ If we're writing a lot of `render` functions, it might feel painful to write som
395395

396396
```js
397397
Vue.h(
398-
'anchored-heading',
398+
Vue.resolveComponent('anchored-heading'),
399399
{
400400
level: 1
401401
},

0 commit comments

Comments
 (0)