vue Render函数

最新推荐文章于 2024-06-25 09:28:42 发布

v折耳

最新推荐文章于 2024-06-25 09:28:42 发布

阅读量5.9k

点赞数 3

分类专栏： vue 文章标签： vue Render函数

本文链接：https://blog.csdn.net/wngzhem/article/details/54140165

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

绝大多数情况下使用template来构建html,Render函数用来满足特点情况下完全使用JavaScript来编程

在遇到写类似的组件的时候需要写很多很长的代码，出于简洁（懒惰使人进步）的角度来说，我们应该找到更合适的方法来实现该效果。

  <body>
        <div id="app">
            <mycomment :level="2">
                这是h2元素
            </mycomment>
        </div>
    </body>
    <script type="text/x-template" id="is">
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
        <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>
    <script>
        Vue.component('mycomment',{
            template:'#is',
            props:{
                level:{
                    type:Number,
                    required:true,
                }
            }
        })
        var app =new Vue({
            el:'#app',
        })


    </script>

这时候Render 函数就很好的解决了这个问题，先来简单一点额例子，算是有基本的骨架了

    <body>
        <div id="app">
            <render-teample :level="4">
                render function

            </render-teample>
        </div>

    </body>
    <script>
    Vue.component('render-teample',{
        render:function(createElement){
            return createElement(
                'h'+this.level,
                this.$slots.default
                )
        },
         props: {
        level: {
          type: Number,
          required: true
        }
    }
});

        var app=new Vue({
            el:"#app",

        });


    </script>

然后进一步给你的组件加入你想要的样式需要事件，变得有血有肉

  <body>
        <div id="app">
            <render-teample :level="4" >

                <div class="jah" slot="myslot">render function</div>
            </render-teample>
        </div>

    </body>
    <script>
    Vue.component('render-teample',{
        render:function(createElement){
            return createElement(
                'h'+this.level,
                {
                    'class':{
                        show:true,
                        hide:false,
                    },
                    style:{
                        width:'200px',
                        height:'400px',
                        background:'red',
                    },
                    attrs:{
                        name:'h-ex',
                        id:'h-id'
                    },
                    props:{
                        myprops:true,
                    },
                     on: {
                    click: function(event){
                        alert(this.num)
                    }
                },
                    nativeOn:{
                        click:function(event) {

                            alert(1111)
                        }
                    }

                },
                [
                    this.$slots.myslot,
                    createElement('div',{
                         domProps:{
                        innerHTML:'holle render'
                    }
                    })
                ]

                )
        },
         props: {
        level: {
          type: Number,
          required: true
        }
    }
});

        var app=new Vue({
            el:"#app",
            data:{
                num:110
            }

        });


    </script>

注意：约束组件中 VNodes 必须是唯一的。

直接把所有元素写在一个createElement()下是很痛苦的，不利于维护。

所以通常会 var com1= createElement('p','item1');var com2= createElement('p','item1');

可以使用return createElement('div',[com1,com2])

这种情况是禁止的return createElement('div',[com1,com1])