Expand the page on render functions, especially their use of slots #712
Conversation
| const { h } = Vue | ||
|
|
||
| return h( | ||
| return Vue.h( |
There was a problem hiding this comment.
This is the only example that was written this way, so I've changed it to match the others.
| @@ -164,6 +162,8 @@ h( | |||
| ) | |||
| ``` | |||
|
|
|||
| If there are no props then the children can usually be passed as the second argument. In cases where that would be ambiguous, `null` can be passed as the second argument to keep the children as the third argument. | |||
There was a problem hiding this comment.
I wanted to make this explicit so I could use it in the subsequent examples.
There was a problem hiding this comment.
This is a fantastic enhancement @skirtles-code! Just have a few questions and suggestions for improvements.
Looking forward to getting this in the docs soon!
| } | ||
| ``` | ||
|
|
||
| If we need to resolve a component by name then we can call `resolveComponent`: |
There was a problem hiding this comment.
When are some use cases for resolving a component by name?
You mention later that it's often unnecessary, so as a reader, I'm curious to know a scenario where knowing this helper method would be important.
There was a problem hiding this comment.
I've updated the next few sentences to try to clarify. I struggled to find a wording that wasn't a clumsy mess. It still doesn't flow as cleanly as I'd like but hopefully it's clear enough.
Co-authored-by: Ben Hong <[email protected]>
Co-authored-by: Ben Hong <[email protected]>
There was a problem hiding this comment.
This is a great iteration @skirtles-code! Going to approve and merge so people can benefit from your work.
We can always submit improvements if people find anything confusing. Great work!
…ots (vuejs#712) * docs: expand the page on render functions, especially their use of slots * Update src/guide/render-function.md Co-authored-by: Ben Hong <[email protected]> * Update src/guide/render-function.md Co-authored-by: Ben Hong <[email protected]> * docs: add a note about global registration and using resolveComponent Co-authored-by: Ben Hong <[email protected]>
https://deploy-preview-712--vue-docs-next-preview.netlify.app/guide/render-function.html
I was involved in a couple of threads on the Vue Forum discussing how to use slots in
renderfunctions. From that it became clear that some key aspects aren't covered in the documentation. I've expanded the relevant section to mention some of the common use cases with explanations of some of the most common pitfalls.I've added an earlier section explaining the creation of component VNodes. This introduces
resolveComponent, which was already used in some of the examples but wasn't explained. However, my main objective was to make it more explicit that there are differences between creating VNodes for HTML elements and components. Otherwise the use of component VNodes in the section about slots comes a bit out of the blue.I've also added a section about how to migrate
<component is="name">. While it might seem obvious to someone who knows how to do it, I've seen several beginners get completely lost trying to write it as arenderfunction. This section also introducesresolveDynamicComponent, which I felt needed to be mentioned somewhere.