脚本宝典收集整理的这篇文章主要介绍了

vue.js – advance – render 函数小抄

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue.js推荐使用的扩展名为vue的组件模板,可以让标签的属性和内容都变得动态,这是很强大也很已用的能力。但是,如果我需要标签名本身都是可以动态的话,怎么办?

比如我希望提供一个标签,可以根据属性值动态选择head的层级,像是把

<h1>header1</h1>
<h2>header2</h2>  

可以替代为:

   <hdr :level="1">header1</hdr>
   <hdr :level="2">header2</hdr>

答案就是render函数。具体做法就是首先注册一个组件:

Vue.component('hdr', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

随后在html内使用此组件:

//javascript
new Vue({
  el: '#example'
})

// html
<div id="example">
   <hdr :level="1">abc</hdr>
   <hdr :level="2">abc</hdr>
</div>

可以执行的代码在此:

http://jsbin.com/xesihujuda/1...

函数render会传入一个createElement函数作为参数,你可以使用此函数来创建标签。第一个参数就是标签名称,以及为创建的标签提供属性和内容,以及创建子标签。在render函数内,可以通过this.$slots访问slot,从而把slot内的元素插入到当前被创建的标签内。为了方便,完整的使用createElement的实例代码抄写自vue.js手册。如下 :

createElement(
  // {String | Object | Function}
  // An HTML tag name, component options, or function
  // returning one of these. Required.
  'div',
  // {Object}
  // A data object corresponding to the attributes
  // you would use in a template. Optional.
  {
    // (see details in the next section below)
  },
  // {String | Array}
  // Children VNodes. Optional.
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)

本来使用render的理由,就是我在封装bootstrap carousel的过程中产生的需要,如下代码是一个封装carousel的实际案例:

javascript

function img1(createElement,s){
  return createElement('img',{attrs:{src:'https://placehold.it/'+s}})
} 

function item(createElement,isa,s){
  return createElement('div',
      {'class':{'item':true,'active':isa}},
    [
      img1(createElement,s)
    ])
}

function inner(createElement){
  return createElement('div',{'class':{'carousel-inner':true}},[
      item(createElement,true,'103X100')
    ,item(createElement,false,'101X100')
    ,item(createElement,false,'102X100')
    ])
}
function leftcontrol(createElement){
     return createElement('a',
          {
         attrs:{
           'href':'#myCarousel1',
           'data-slide':'prev',
           'class':'carousel-control left'}
       },
    [
      left(createElement)
    ])
}
function rightcontrol(createElement){
     return createElement('a',
          {
         attrs:{
           'href':'#myCarousel',
           'data-slide':'prev',
           'class':'carousel-control right'}
       },
    [
      right(createElement)
    ])
}

function right(createElement){
     return createElement('span',
          {
         attrs:{
           'class':'glyphicon glyphicon-chevron-right'}
       },
    [])
}
function left(createElement){
     return createElement('span',
          {
         attrs:{
           'class':'glyphicon glyphicon-chevron-left'}
       },
    [])
}


Vue.component('mmm', {
  render: function (createElement) {
   return createElement('div',
        {
            //'class':{'carousel':true, 'slide':true},
            attrs:{
                id:'myCarousel1',
              'class':'carousel slide',
              'data-ride':'carousel'

            }
        },
               [inner(createElement),
        leftcontrol(createElement),
         rightcontrol(createElement)]
   )      
  }
})   
new Vue({
  el: '#example'
})

html

<div id="example">
   <mmm></mmm>
</div>

可执行案例

http://jsbin.com/pulohup/edit...

参考

https://vuejs.org/guide/rende...

总结

以上是脚本宝典为你收集整理的

vue.js – advance – render 函数小抄

全部内容,希望文章能够帮你解决

vue.js – advance – render 函数小抄

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过