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 函数的第三个参数，可以是数组，例如上面的例子，生成的结果如下：

3. 综述

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

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

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

4. 个人公众号

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

巴特西

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

最新文章

热门文章