vue Render函数

最新推荐文章于 2024-03-31 18:00:22 发布

knqiufan

最新推荐文章于 2024-03-31 18:00:22 发布

阅读量560

点赞数

分类专栏： vue 前端 JavaScript 文章标签： vue.js javascript

前端同时被 3 个专栏收录

12 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

vue

8 篇文章 1 订阅

订阅专栏

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

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

[html]view plaincopy 
   
   <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 函数就很好的解决了这个问题，先来简单一点额例子，算是有基本的骨架了

[html]view plaincopy 
   
 <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>  

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

[html]view plaincopy 
   
   <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])

knqiufan

关注

0
点赞
踩
0

收藏

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

绝大多数情况下使用template来构建html,Render函数用来满足特点情况下完全使用JavaScript来编程在遇到写类似的组件的时候需要写很多很长的代码，出于简洁（懒惰使人进步）的角度来说，我们应该找到更合适的方法来实现该效果。[html] view plain copy body> div id="
复制链接

扫一扫

专栏目录