VueJs Slots in Vue JSX with 'babel-plugin-transform-vue-jsx'
Using Slots in Vue JSX with 'babel-plugin-transform-vue-jsx'
If you're Using VueJS2 and like to use JSX along with it. In this case,to use the slot, the solution with example is below.We have to use this.$slots.default It's almost like this.props.children in React JS.
Component.js :
export default {
render(h) { //eslint-disable-line
return (
<li>
{ this.$slots.default }
</li>
);
}
}ParentComponent.js
import Component from './Component';
export default {
render(h) { //eslint-disable-line
return (
<ul>
<Component>
Hello World
</Component>
</ul>
);
}
};