使用 Vue JSX 中的 Slots 和 babel-plugin-transform-vue-jsx

如果你正在使用 VueJS2 并喜欢使用 JSX。在这种情况下，要使用插槽，示例的解决方案如下。我们必须使用 this.$slots.default 它几乎像 React JS 中的 this.props.children。

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