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函数使用

 

上一篇:渲染函数render


下一篇:react源码解析5.jsx&核心api