vue的render渲染h别名写法

vue的render渲染函数，h别名写法

 

先看下基本参数：

createElement ( 

 // 参数1（必需）
 // {String | Object | Function}
 // 解释： html标签，组件选项，函数

 // 参数2，一个对应属性的数据对象（可选）

 // 参数3（可选）
 // {String | Array}
 // 解释：子节点（VNodes），如果参数1为父节点，但是这里参数3没有赋值，也就是子节点就终止了，就表示没有内容
   

---------
理解参数3
<div></div>  // 没有子节点，终止，参数3不赋值

<div><hr /></div>  // 有子节点，是个hr节点，参数3赋值
<div>文本啊</div>  // 有子节点，不是html标签，是参数1所包含的文本，也就是参数3赋值非html标签，是文本内容
)

举例1：

createElement('h1')

举例2：

// 设置Button组件的大小和图标

createElement('Button', {

      props: { size: 'small', icon: 'md-trash' }

}, '删除')

这里用个效果图来表示所渲染出来的内容吧：

这个一般可以用来渲染 table数据所能够操作的内容，比如可以删除这一tr数据或修改这一tr数据

解释下第二个参数的具体内容：

{
    class: { },
    style: { },
    attrs: { }, // html属性
    props: { }, // 组件props
    domProps: { }, // DOM属性
    on: {},
    nativeOn: {},
    directives: [], // 自定义指令
    scopedSlots: {} // 作用域slot
}

render: h => h(App)  可以互等  render:function(h){return h(App);}

h其实就是等于createElement里的内容

完整写法：

render: function(createElement) { return createElement();}

 

最后发下上面那个效果图渲染操作，是iview-admin框架里的内容：

大家可以参考：《Vue.js实战》里面有一章节讲到了Render函数的用法，不过没用到简写，这个是我看iview的main.js里用到的写法