vue.js - advance - render 函数小抄

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

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

header1

header2

可以替代为：

header1header2

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

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

随后在html内使用此组件：

//javascriptnew Vue({  el: '#example'})// htmlabcabc

可以执行的代码在此：

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

functionimg1(createElement,s){returncreateElement('img',{attrs:{src:'https://placehold.it/'+s}})}functionitem(createElement,isa,s){returncreateElement('div',      {'class':{'item':true,'active':isa}},    [      img1(createElement,s)    ])}functioninner(createElement){returncreateElement('div',{'class':{'carousel-inner':true}},[      item(createElement,true,'103X100')    ,item(createElement,false,'101X100')    ,item(createElement,false,'102X100')    ])}functionleftcontrol(createElement){returncreateElement('a',          {        attrs:{'href':'#myCarousel1','data-slide':'prev','class':'carousel-control left'}      },    [      left(createElement)    ])}functionrightcontrol(createElement){returncreateElement('a',          {        attrs:{'href':'#myCarousel','data-slide':'prev','class':'carousel-control right'}      },    [      right(createElement)    ])}functionright(createElement){returncreateElement('span',          {        attrs:{'class':'glyphicon glyphicon-chevron-right'}      },    [])}functionleft(createElement){returncreateElement('span',          {        attrs:{'class':'glyphicon glyphicon-chevron-left'}      },    [])}Vue.component('mmm', {  render:function(createElement){returncreateElement('div',        {//'class':{'carousel':true, 'slide':true},attrs:{                id:'myCarousel1','class':'carousel slide','data-ride':'carousel'}        },              [inner(createElement),        leftcontrol(createElement),        rightcontrol(createElement)]  )        }})newVue({  el:'#example'})

html

可执行案例

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

参考

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