render函数

最新推荐文章于 2022-11-22 14:28:09 发布

bling flower

最新推荐文章于 2022-11-22 14:28:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/108921705

版权

render函数(渲染函数)

render和template是一样的作用，render提供的内置函数可以简化代码操作，render函数比template更接近编译器

template只封装了html代码

 render(createElement)
 createElement是一个函数，需要3个可选参数：
 第一个参数：标签名称
 第二个参数：给当前标签绑定的属性对象
 第三个属性：给当前标签插入的子元素数组    ''  this.$slots.default

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            //子组件
            Vue.component('my-child',{
                data(){
                    return {

                    }
                },
                props:{
                   num:{
                       type:Number,
                       required:true
                   }
                },
                render(createElement){
                    //createElement是一个函数
                    //参数：标签名称，属性对象，子元素数组
                    return createElement('h'+this.num,{
                        //将绑定给当前元素的所有属性写在对象中
                        style:{
                            color:'blue',

                        }
                    },['default--',this.$slots.default])
                }
                /*template:`
                    <div>
                        <h1 v-if='num==1'>
                            <slot></slot>
                        </h1>
                        <h2 v-else-if='num==2'>
                            <slot></slot>
                        </h2>
                        <h3 v-else-if='num==3'>
                            <slot></slot>
                        </h3>
                        <h4 v-else-if='num==4'>
                            <slot></slot>
                        </h4>
                        <h5 v-else-if='num==5'>
                            <slot></slot>
                        </h5>
                        <h6 v-else>
                            <slot></slot>
                        </h6>
                    </div>
                `*/
            })
            var app=new Vue({
                el:'#app',
                data:{
                },
                components:{//父组件
                    'my-parent':{
                        data(){
                            return {
                                num:2,
                            }
                        },
                        template:`
                            <div>
                                <h1>my-parent</h1>
                                <my-child :num='num'>hello</my-child>
                            </div>
                        `
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <my-parent></my-parent>
    </div>
</body>
</html>

bling flower

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
render函数

render函数(渲染函数)render和template是一样的作用，render提供的内置函数可以简化代码操作，render函数比template更接近编译器template只封装了html代码 render(createElement) createElement是一个函数，需要3个可选参数：第一个参数：标签名称第二个参数：给当前标签绑定的属性对象第三个属性：给当前标签插入的子元素数组 '' this.$slots.default实例：<!DOCTY
复制链接

扫一扫