<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <child :level=1>hello Vue</child>
        <child :level=6>
            <span slot="footer">span</span>
            <p slot="header">header slot<span>span</span></p>
        </child>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>//使用时改为自己的vue路径
    <script>
    Vue.component('child', {
        render: function(createElement) {
            return createElement('h'+ this.level, {
                'class': {
                    foo: true,
                    bar: true
                },
                style: {
                    color: "red"
                },
                attrs: {
                    id: 'foo',
                    'data-id': 'bar'
                },
                domProps: {
                    //
                },
                on: {
                    click: this.clickit
                },
            },
            [this.$slots.default]
           )
        },
        template: '<div v-if="level===1"><slot></slot></div>',
        props: {
            level: {
                type: Number,
                required: true
            }
        },
        methods: {
            clickit: function() {
                console.log('click')
            }
        }
    })
    new Vue({
    	el:"#app"
    })
    </script>
</body>

</html>

  

posted on 2017-08-07 14:40  前端入门菜鸟  阅读(3905)  评论(0编辑  收藏  举报