Vue render函数使用

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
                ? "下架"
                : "审核中"
            );
          },

标签：Vue,函数,render,state,params,createElement,row
来源： https://blog.csdn.net/qq_44981128/article/details/121225262