秒懂Render的三个参数

2023-12-28 08:09| 来源: 网络整理| 查看: 265

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 } }) }) ) },}

相当于模板语法

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: '谈笑风生' }) //function:返回一个含有数据选项的对象 var domFun = function () { return { template: `谈笑风生` }} 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: '江心比心' } }) } })

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

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

【本文地址】

公司简介

联系我们