秒懂Render的三个参数

Render函数是什么 简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

render:(r=>{ return createElement('h1', 'Hello World!') })

render方法会传入一个createElement函数，它是一个用于创建DOM元素或者用于实例化其他组件的构造方法

export default { render: function(createElement) { const menu_items = ["首页","搜索","分类","系统"] return createElement('ul', menu_items.map(item => { return createElement('li', { class: { 'uk-nav': true }, domProps: { innerHTML: item } }) }) ) },}

相当于模板语法

<ul> <li v-for="item in menu_items" :class="{'uk-nav': true}"> {{ item }} </li></ul>

createElement的定义

createElement(tag,data,children) 返回值vNode（虚拟节点） 参数说明: tag　　　　类型：String/Object/Function　 说明：一个HTML标签，组件类型,或一个函数 Data　　　 类型：Object 说明：一个对应属性的数据对象,用于向创建的节点对象设置属性值 Children　　类型：String/Array　　　　　　　说明：子节点

render函数的第一个参数 第一个参数必选. 可选类型 string:html标签 object：一个含有数据选项的对象 function:返回一个含有数据选项的对象

Vue.component('child', { props: ['level'], render: function (createElement) { //string:html标签 return createElement('h1') //object：一个含有数据选项的对象 return createElement({ template: '<div>谈笑风生</div>' }) //function:返回一个含有数据选项的对象 var domFun = function () { return { template: `<div>谈笑风生</div>` }} return createElement(domFun()) } })

render函数的第二个参数 第二个参数可选 第二个参数是数据对象。只能是object class/style/attrs/domProps/Prop

Vue.component('child', { props: ['level'], render: function (createElement) { return createElement('div', { class: { foo: true, baz: false }, style: { height: '34px', background: 'orange', fontSize: '16px' }, //正常的html特性(除了class和style) attrs: { id: 'foo', title: 'baz' }, //用来写原生的DOM属性 domProps: { innerHTML: '<span style="color:blue;font-size:24px">江心比心</span>' } }) } })

render函数的第三个参数 代表子节点 第三个参数可选 String|Array

Vue.component('child', { props: ['level'], render: function (createElement) { return createElement('div', [ createElement('h1', '我是大标题'), createElement('h2', '我是二标题'), createElement('h3', '我是三标题')]) } })