Skip to content

Fix two examples of using h with components and slots #681

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

Conversation

skirtles-code
Copy link
Contributor

Description of Problem

Two of the examples in render-function.md have problems, both related to using h with components and slots.

The first example tries to create a component using Vue.h('child'. This won't work because it needs to use resolveComponent.

The second example triggers a warning:

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

You can see it yourself here: https://jsfiddle.net/skirtle/ho9t3upv/

When using h to create an HTML element there are various different ways to pass the children. However, when creating a component the children have to be passed as a slot object containing functions, otherwise the warning above is shown.

Proposed Solution

In the first example I have also adjusted the spacing to accommodate the Vue.resolveComponent.

The second example is intended to illustrate how painful it is to write render functions without JSX. As well as fixing the warning, adding the extra complication of the slot object actually helps to reinforce this point.

@NataliaTepluhina NataliaTepluhina merged commit dbeed5b into vuejs:master Nov 8, 2020
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 8, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 8, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 9, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 9, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 9, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 9, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
mandaputtra pushed a commit to vuejs-id/docs-next that referenced this pull request Nov 10, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

* docs: update component-slots.md (vuejs#685)

* docs: update component-slots.md

* doc: update component-slots.md

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
Co-authored-by: Zihao Yang <[email protected]>
mandaputtra added a commit to vuejs-id/docs-next that referenced this pull request Nov 11, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

* docs: update component-slots.md (vuejs#685)

* docs: update component-slots.md

* doc: update component-slots.md

* fix: revise the migration guide for $children, especially the example (vuejs#688)

* Restore search page (vuejs#682)

* Restore search page

* Update search page

* update jsdelivr link (vuejs#684)

point to current vue release

* fix: minor revisions to the migration guide for custom directives (vuejs#689)

* fix: revise the migration guide for the emits option (vuejs#690)

* fix: update the migration guide introduction (vuejs#691)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
Co-authored-by: Zihao Yang <[email protected]>
Co-authored-by: Noel De Martin <[email protected]>
Co-authored-by: Isaac Levy <[email protected]>
Co-authored-by: Manda Putra <[email protected]>
mandaputtra added a commit to vuejs-id/docs-next that referenced this pull request Nov 13, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

* docs: update component-slots.md (vuejs#685)

* docs: update component-slots.md

* doc: update component-slots.md

* fix: revise the migration guide for $children, especially the example (vuejs#688)

* Restore search page (vuejs#682)

* Restore search page

* Update search page

* update jsdelivr link (vuejs#684)

point to current vue release

* fix: minor revisions to the migration guide for custom directives (vuejs#689)

* fix: revise the migration guide for the emits option (vuejs#690)

* fix: update the migration guide introduction (vuejs#691)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
Co-authored-by: Zihao Yang <[email protected]>
Co-authored-by: Noel De Martin <[email protected]>
Co-authored-by: Isaac Levy <[email protected]>
Co-authored-by: Manda Putra <[email protected]>
mandaputtra added a commit to vuejs-id/docs-next that referenced this pull request Nov 16, 2020
* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

* docs: update component-slots.md (vuejs#685)

* docs: update component-slots.md

* doc: update component-slots.md

* fix: revise the migration guide for $children, especially the example (vuejs#688)

* Restore search page (vuejs#682)

* Restore search page

* Update search page

* update jsdelivr link (vuejs#684)

point to current vue release

* fix: minor revisions to the migration guide for custom directives (vuejs#689)

* fix: revise the migration guide for the emits option (vuejs#690)

* fix: update the migration guide introduction (vuejs#691)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>
Co-authored-by: Zihao Yang <[email protected]>
Co-authored-by: Noel De Martin <[email protected]>
Co-authored-by: Isaac Levy <[email protected]>
Co-authored-by: Manda Putra <[email protected]>
nick-lai pushed a commit to nick-lai/docs-next that referenced this pull request Dec 2, 2020
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.

2 participants