菜单

Vue中render函数的选取办法,vuerender函数

2019年6月1日 - CSS/CSS3

小心:约束组件中 VNodes 必须是唯一的。

Vue中render函数的行使办法,vuerender函数

render函数

vue通过 template 来创制你的
HTML。可是,在特殊景况下,这种写死的格局不能满意须求,必须须要js的编制程序才具。此时,须要用render来创造HTML。

怎样景况下适合利用render函数

在二回封装1套通用开关组件的职业中,按键有五个样式(default success error
)。首先,你或然会想到如下完结

 <div v-if="type === 'success'">success</div>
 <div v-else-if="type === 'error'">error</div>
 <div v-else-if="type === 'warm'">warm</div>
 <div v-else>default</div>

这么写在按键样式少的时候完全没反常,可是试想,假诺急需的按键样式有二十一个,开关内的文字依据实际意况而定(如success开关内的文字恐怕是OK、GOOD等等)。那么template写死的措施就显示很无力了。遇上类似那样的场馆,使用render函数可以说最优选取了。

依附实际境况改写按键组件

首先render函数生成的内容也正是template的内容,故使用render函数时,在.vue文件中需求先把template标签去掉。只保留逻辑层。

export default {
 render(h) {
  return h('div',{
   'class': {
    btn: true,
    success: this.type === 'success',
    error: this.type === 'error',
    warm: this.type === 'warm',
    default: this.type === 'default'
   },
   domProps: {
    innerHTML: this.$slots.default[0].text
   },
   on: {
    click: this.clickHandle
   }
  })
 },
 methods: {
  clickHandle() {
   // dosomething
  }
 },
 props: {
  type: {
   type: String,
   default: 'default'
  },
  text: {
   type: String,
   default: 'default'
  }
 }
};

好玩的事组件化思维,能抽象出来的东西不用写死在逻辑上。这里的clickHandle函数可以依靠按键的type类型触发分裂的逻辑,就十分的少叙述了。

然后在父组件调用

<btn
 v-for="(btn, index) in testData"
 :type="btn.type"
 :text="btn.text"
 :key="index">{{btn.text}}
</btn>

使用jsx

没有错,要记住各个参数的类型同用法,按序传参实在是太费事了。那么实际上可以用jsx来优化这几个麻烦的经过。

return (
 <div
  class={{
   btn: true,
   success: this.type === 'success',
   error: this.type === 'error',
   warm: this.type === 'warm',
   default: this.type === 'default'
  }}
  onClick={this.clickHandle}>
  {this.$slots.default[0].text}
 </div>
)

示例二:

在遇到写类似的零部件的时候必要写过多相当长的代码,出于简洁(懒惰使人升高)的角度来讲,大家应有找到更适合的措施来实现该功用。

 <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])

以上正是本文的全体内容,希望对我们的上学抱有扶助,也愿意大家多多帮忙帮客之家。

http://www.bkjia.com/Javascript/1302140.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1302140.htmlTechArticleVue中render函数的使用方法,vuerender函数
render函数 vue通过 template 来创建你的
HTML。可是,在非常意况下,这种写死的格局不可能满意急需,必…

首先render函数生成的内容约等于template的剧情,故使用render函数时,在.vue文件中须求先把template标签去掉。只保留逻辑层。

依据实际情形改写开关组件

能够接纳return createElement(‘div’,[com1,com2])

<btn
 v-for="(btn, index) in testData"
 :type="btn.type"
 :text="btn.text"
 :key="index">{{btn.text}}
</btn>

基于组件化思维,能抽象出来的东西不要写死在逻辑上。这里的clickHandle函数能够依照开关的type类型触发差别的逻辑,就相当的少叙述了。

 <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> 
 <div v-if="type === 'success'">success</div>
 <div v-else-if="type === 'error'">error</div>
 <div v-else-if="type === 'warm'">warm</div>
 <div v-else>default</div>
export default {
 render(h) {
  return h('div',{
   'class': {
    btn: true,
    success: this.type === 'success',
    error: this.type === 'error',
    warm: this.type === 'warm',
    default: this.type === 'default'
   },
   domProps: {
    innerHTML: this.$slots.default[0].text
   },
   on: {
    click: this.clickHandle
   }
  })
 },
 methods: {
  clickHandle() {
   // dosomething
  }
 },
 props: {
  type: {
   type: String,
   default: 'default'
  },
  text: {
   type: String,
   default: 'default'
  }
 }
};

你或然感兴趣的篇章:

 <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> 

由此日常会

那儿候Render
函数就很好的减轻了这几个难题,先来大致一点额事例,算是有主题的骨架了

vue通过 template 来创建你的
HTML。但是,在奇特景况下,这种写死的格局相当的小概知足须要,必须须求js的编制程序手艺。此时,要求用render来创制HTML。

return (
 <div
  class={{
   btn: true,
   success: this.type === 'success',
   error: this.type === 'error',
   warm: this.type === 'warm',
   default: this.type === 'default'
  }}
  onClick={this.clickHandle}>
  {this.$slots.default[0].text}
 </div>
)

怎么情状下适合利用render函数

这种情景是禁止的return createElement(‘div’,[com1,com1])

在碰着写类似的机件的时候须要写过多相当长的代码,出于简洁(懒惰使人升高)的角度来讲,大家应有找到更确切的点子来完毕该意义。

一直把具有因素写在一个createElement()下是异常的惨痛的,不便利保养。

那般写在按键样式少的时候完全没不寻常,但是试想,假如急需的按键样式有15个,开关内的文字依照实际情形而定(如success开关内的文字或然是OK、GOOD等等)。那么template写死的措施就显得很无力了。遇上好像那样的场所,使用render函数能够说最优选择了。

render函数

 <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> 
var com1= createElement('p','item1');var
com2= createElement('p','item1');

然后在父组件调用

上述正是本文的全部内容,希望对大家的就学抱有补助,也冀望我们多多协理脚本之家。

示例二:

使用jsx

没有错,要铭记每个参数的类型同用法,按序传参实在是太艰巨了。那么实际上能够用jsx来优化这几个麻烦的进度。

接下来一发给您的零件加入你想要的体制须要事件,变得生动

在二次封装一套通用按键组件的办事中,按键有多个样式(default success error
)。首先,你只怕会想到如下完成

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图