Vue实战052:render函数动态渲染DOM元素

时间:2024-10-11 23:04:40

1、render函数参数render这个方法有两个参数,第一个标签参数为必填项, 类型可以为 String 、 Object 、Function(createElement ),可以是 HTML 标签字符串、组件对象或者async 异步函数;第二个参数context 为选填,通过 context 可以访问组件中data、props、slots、children 以及 parent 中的数据;render返回值是VNode(虚拟节点),类型可以是String 、Array。

Vue实战052:render函数动态渲染DOM元素

3、第二个参数是个选填参数,一个包含模板相关属性的数据对象,可以定义属性attrs、样式style、动作on、DOM属性值domProps等。

Vue实战052:render函数动态渲染DOM元素

5、如何使用createElement 函数这里用的是es6箭头函数的简写形式,render: function(createElement){}演变render: function(h){}演变render: (h) => {},方法一直接生成div元素,方法二在div再生成span子节,不管用那种凡是都是通过render函数渲染到组件中的。

Vue实战052:render函数动态渲染DOM元素
© 长短途