-
Notifications
You must be signed in to change notification settings - Fork 4.7k
docs: Add migration guide for h
rendering registered component (#1927)
#545
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Fiv5 thank you for adding this contribution! I've left a few suggestions (mostly on wording/code formatting), rest looks good to me 👍🏻
|
||
### 2.x Syntax | ||
|
||
In 2.x, when a component has been registered, the render function will work well when passing the component's name as string to the first arguments: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In 2.x, when a component has been registered, the render function will work well when passing the component's name as string to the first arguments: | |
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: |
data: () => ({ | ||
count: 0 | ||
}), | ||
template: '<button @click="count++">Clicked {{ count }} times.</button>' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
template: '<button @click="count++">Clicked {{ count }} times.</button>' | |
template: ` | |
<button @click="count++"> | |
Clicked {{ count }} times. | |
</button> | |
` |
|
||
### 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 API: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 API: | |
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: |
Thanks for the valuable suggestions! |
// 3.x | ||
import { h, resolveComponent } from 'vue' | ||
|
||
const ButtonCounter = resolveComponent('button-counter') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you'd get a warning calling it like this:
[Vue warn]: resolveComponent can only be used in render() or setup().
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, I will double-check the examples provided.
src/guide/render-function.md
Outdated
Vue.h( | ||
'anchored-heading', | ||
resolveComponent('anchored-heading'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There seems to be a small inconsistency here. The rest of this example is using Vue.h
but this line uses an imported resolveComponent
rather than Vue.resolveComponent
.
I don't believe |
…js#1927) (vuejs#545) * docs: Add migration guide for `h` rendering registered component (vuejs#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]>
Description of Problem
In v3.x,
h
now no longer use a string ID (e.g. h('some-component')) to implicitly lookup globally registered components. It may explicitly show on the Migration Guide Docs.Proposed Solution
Update the Migration Guide.
Additional Information