diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 2cb18a07fb..691ee510fc 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -128,6 +128,50 @@ In 3.x, the entire VNode props structure is flattened. Using the example from ab } ``` +## Registered Component + +### 2.x Syntax + +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: + +```js +// 2.x +Vue.component('button-counter', { + data: () => ({ + count: 0 + }), + template: ` + + ` +}) + +export default { + render(h) { + return h('button-counter') + } +} +``` + +### 3.x Syntax + +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: + +```js +// 3.x +import { h, resolveComponent } from 'vue' + +export default { + setup() { + const ButtonCounter = resolveComponent('button-counter') + return () => h(ButtonCounter) + } +} +``` + +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). + ## Migration Strategy ### Library Authors diff --git a/src/guide/render-function.md b/src/guide/render-function.md index ff2365b775..6fde9bf59d 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -395,7 +395,7 @@ If we're writing a lot of `render` functions, it might feel painful to write som ```js Vue.h( - 'anchored-heading', + Vue.resolveComponent('anchored-heading'), { level: 1 },