render函数的简单使用

Posted 2020-10-01 前段入门菜鸟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了render函数的简单使用相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于render函数的简单使用的主要内容，如果未能解决你的问题，请参考以下文章

React中的render props，让组件复用（共享）变得简单，你还不赶紧掌握它？

使用带有渲染功能的 Vue.js 3 片段