Vue3 render渲染函数

作者: 温新

阅读: 6222

时间: 2021-08-12 13:24:05

作者：温新

时间：2021-08-12

hi，我是温新，一名PHPer

h函数用法：

h('标签元素','标签属性',[标签文本内容]);

本案例将使用渲染函数来展示不同的标题。

<body id="body">
    <div id="app">
        <hh :level="1">hi,render</hh>
    </div>
</body>

<script>
    const app = Vue.createApp({

    });

    app.component('hh', {
        props:['level'],
        // 渲染函数
        render () {
            const { h } = Vue;
            // h() 虚拟DOM
            // 创建hN元素
            return h('h'+this.level,{},[this.$slots.default()]);
        }
    });

    const vm = app.mount('#app');
</script>
</body>

h()函数的第三个参数可以是一个字符串或一个数组，如下写法是可以的

return h('h'+this.level,{},this.$slots.default());

this.$slots.default()接收的是插槽的中的数据。

我是温新

每天进步一点，就一点点

请登录后再评论