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