-
Notifications
You must be signed in to change notification settings - Fork 4.7k
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
NataliaTepluhina
merged 1 commit into
vuejs:master
from
skirtles-code:render-h-component-slots
Nov 8, 2020
Merged
Fix two examples of using h with components and slots #681
NataliaTepluhina
merged 1 commit into
vuejs:master
from
skirtles-code:render-h-component-slots
Nov 8, 2020
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
NataliaTepluhina
approved these changes
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of Problem
Two of the examples in
render-function.md
have problems, both related to usingh
with components and slots.The first example tries to create a component using
Vue.h('child'
. This won't work because it needs to useresolveComponent
.The second example triggers a warning:
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.