1.render函数作用???
先附上传送门,官网render函数。
render 函数
跟 template
一样都是创建 html 模板的,但是有些场景中用 template
实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数
。
2render函数使用
render 函数的参数(createElement)
createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。
createElement 函数的返回值是 VNode(即:虚拟节点)。
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。。
createElement 函数的参数(三个)
1. HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需。
2.一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
3.子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。
render: (h, params) => {
此时它所代表得含义是:render:(h,params) => {
return h(" 定义的元素 “,{ 元素的性质 },” 元素的内容"/[元素的内容])
}
实例:
render: (h, params) => {
return h(
"el-link",
{
props: {
type:
params.row.state === 0
? "success"
: params.row.state === 1
? "info"
: "danger",
underline: false,
// icon: "el-icon-edit"
}, // 组件的props
},
params.row.state === 0
? "上架"
: params.row.state === 1
? "下架"
: "审核中"
);
},