Skip to content

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

Merged
merged 5 commits into from
Sep 25, 2020

Conversation

Fiv5
Copy link
Contributor

@Fiv5 Fiv5 commented Sep 24, 2020

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

Copy link
Member

@NataliaTepluhina NataliaTepluhina left a 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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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>'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:

@Fiv5
Copy link
Contributor Author

Fiv5 commented Sep 24, 2020

Thanks for the valuable suggestions!

// 3.x
import { h, resolveComponent } from 'vue'

const ButtonCounter = resolveComponent('button-counter')
Copy link
Contributor

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().

Copy link
Contributor Author

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.

Vue.h(
'anchored-heading',
resolveComponent('anchored-heading'),
Copy link
Contributor

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.

@skirtles-code
Copy link
Contributor

I don't believe package-lock.json should be included in this PR.

@NataliaTepluhina NataliaTepluhina merged commit 706a8cd into vuejs:master Sep 25, 2020
nick-lai pushed a commit to nick-lai/docs-next that referenced this pull request Dec 2, 2020
…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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants