<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从this.$slots获取VNodes列表中的静态内容</title>
</head>
<body>
    <div id="app">
        <blog-post>
            <h2 slot="header"><span>可以从this.$slots获取VNodes列表中的静态内容</span></h2>
            <p>这是一个段落</p>
            <p slot="footer">版权所有</p>
            <p>这是另一个段落</p>
        </blog-post>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.component('blog-post',{
            render:function (createElement) {
                let header = this.$slots.header;
                let body = this.$slots.default;
                let footer = this.$slots.footer;

                return createElement('div',[
                    createElement('header',header),
                    createElement('main',body),
                    createElement('footer',footer)
                ])

            }
        });

        let vm = new Vue({
            el:'#app',
        })
    </script>
</body>
</html>