VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂，适合新手

1. 概述

老话说的好：不用想的太多、太远，做好当天的事，知道明天要做什么就可以了。

 

言归正传，今天我们来聊聊 VUE 中 render 函数的使用。

 

2. render 函数

2.1 一个简单的例子

<body>
    <div id="myDiv"></div>
</body>
<script>
    
   const app = Vue.createApp({
      
       template:`
            <my-h>
                追风人
            </my-h>
       `
   });

   app.component('my-h', {
        template:`
            <h1>
                <slot />
            </h1>
        `
   });

   const vm = app.mount("#myDiv");

</script>

 

 这个例子中，我们用到了之前学的 子组件 和 插槽，实现了对主组件中的文字加 h 标签的功能。

 

2.2 依据数据，改变 h 标签

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 2
            }
        },

        template:`
            <my-h :level="myLevel">
                追风人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        template:`
            <h1 v-if="level===1">
                <slot />
            </h1>
            <h2 v-if="level===2">
                <slot />
            </h2>
        `
    });

这个例子中，我们希望依据数据 myLevel 的值，改变主组件中文字的 h 标签，1 对应 h1，2 对应 h2。

 

2.3 更多的 h 标签

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 3
            }
        },

        template:`
            <my-h :level="myLevel">
                追风人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        template:`
            <h1 v-if="level===1">
                <slot />
            </h1>
            <h2 v-if="level===2">
                <slot />
            </h2>
            <h3 v-if="level===3">
                <slot />
            </h3>
            <h4 v-if="level===4">
                <slot />
            </h4>
            <h5 v-if="level===5">
                <slot />
            </h5>
        `
    });

 我们希望可以有更多的 h 标签供选择，但显然这么写，非常的不优雅。

 

2.4 使用 render 函数 简化代码

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 6
            }
        },

        template:`
            <my-h :level="myLevel">
                追风人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        
        render() {
            const { h } = Vue;
            return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default())
        }
    });

这个例子中，我们使用 render 函数 代替 template。

const { h } = Vue;  这句是固定写法。

return h('h' + this.level, {name:"myh", id:"myh"}, this.$slots.default())

这句中，第一个参数 'h' + this.level 是标签，第二个参数 {name:"myh", id:"myh"} 是标签的属性，第三个参数 this.$slots.default() 是标签包裹的内容

生成的标签结果如下：<h6 name="myh" id="myh"> 追风人 </h6>

 

2.5 render 函数包裹更多的内容

    const app = Vue.createApp({
        
        data() {
            return {
                myLevel: 1
            }
        },

        template:`
            <my-h :level="myLevel">
                追风人
            </my-h>
        `
    });

    app.component('my-h', {
        props: ['level'],
        
        render() {
            const { h } = Vue;
            return h('h' + this.level, {name:"myh", id:"myh"}, [
                
                this.$slots.default(),
                h('br', {}),
                h('button', {onclick:"alert(123)"}, '按钮')
            ])
        }
    });

 

 render 函数中 h 函数的第三个参数，可以是数组，例如上面的例子，生成的结果如下：

 <h1 name="myh" id="myh"> 追风人 <br><button onclick="alert(123)">按钮</button></h1>

 

3. 综述

今天聊了一下 VUE 中 render 函数的使用，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

 

4. 个人公众号

微信搜索公众号：追风人聊Java，欢迎大家关注

posted @ 2022-06-01 20:29  追风人聊Java  阅读(1414)  评论(0)  编辑  收藏  举报