Vue.js Slots Using Slots in Vue JSX with 'babel-plugin-transform-vue-jsx'


Example

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>
        );
    }
};