In React, I can create a FancyList component like this:
const FancyList : React.SFC<{},{}> ({children}) => (
<ul>
{...children}
</ul>
);
const FancyListItem : React.SFC<{text: string}, {}> ({children}) => <li>{...children}</li>
const App = React.SFC<{},{}> () => (
<FancyList>
<FancyListItem>foo</FancyListItem>
<FancyList>
);
Attempting to accomplish something similar in Vue, I have noticed that passing children around is not the preferred method. Despite my efforts and experimentation, it seems that this approach does not align with Vue's documentation. Here is an example of what I have tried within the parent component. I have registered the FancyListItem component to both the parent and the root. The template code in the parent component looks like this:
<ul>
<li v-for child in $root.$children>
</ul>
or like this:
<ul>
<li v-for child in children>
</ul>
In the root, the template code appears like this:
<FancyList>
<FancyListItem>Some Text</FancyListItem>
<FancyListItem>Some Other Text</FancyListItem>
</FancyList>
Unfortunately, in either case, I am unable to render anything inside the ul element.