Runtime subcomponents compilation not working
Version
3.2.31
Reproduction link
Steps to reproduce
- Create a vue v3 application with runtime compilation, some root component and a subcomponent with some specific $data
- Provide html for that application that uses a subcomponent and text binding inside that subcomponent's html to some of that subcomponent's data
- Compile the application and see it on a server (using runtime compiler)
What is expected?
subcomponent's html should be parsed and bindings should show data from that subcomponent's data
What is actually happening?
instead of subcomponent, an empty comment block is shown
After debugging Vue, I see that someone completely forgot about subcomponents and their contents in the runtime compiler, they are not handled properly at all, their render function is not provided by the compiler, but even if it would be provided, the context of the subcomponent compilation is also wrong (compiler doesn't recognize that subcomponents have their own context). This is a big issue
Nothing was forgotten. this is simply not a feature. you can't define a component's template like this - that way is semantically already used to define "slot content".
In Vue 2, that was possible by adding a special "inline-template" prop or something, but that feature was officially dropped in Vue 3.
So to be clear: if you want to define templates for subcomponents, you can't do that from within a parent component's template - you either provide a string template in the sub-component, or define the template in a <template>
block somewhere outside of the app.
Thank you for the clarification, it confused me because this is how it works for the root component, too bad that there is no section in the documentation concerning peculiarities of runtime compilation. Those subcomponents I mentioned didn't use any slots and didn't have templates so I assumed that the runtime compiler would treat their inner html as the template.
Those subcomponents I mentioned didn't use any slots and didn't have templates so I assumed that the runtime compiler would treat their inner html as the template.
Slot usage happens in the template of a component so "the components don't use any slots" is not something the compiler would know if the components don't have any templates of their own.