当前位置:首页 >> 网络编程

vue 中的 render 函数作用详解

render 函数作用

vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。

注:本文代码都是在单文件组件中编写。代码地址

render 函数作用

render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数。

官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几。具体代码可以看文档。

render 函数讲解

render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement,我们重点来说 createElement 参数。

render 函数的返回值(VNode)

VNode(即:虚拟节点),也就是我们要渲染的节点。

render 函数的参数(createElement)

createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。

createElement 函数的返回值(VNode)

createElement 函数的返回值是 VNode(即:虚拟节点)。

createElement 函数的参数(三个)

一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需。

一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。

结合代码

/**
 * render: 渲染函数
 * 参数: createElement
 * 参数类型: Function
 */
 render: function (createElement) {
  let _this = this['$options'].parent // 我这个是在 .vue 文件的 components 中写的,这样写才能访问this
  let _header = _this.$slots.header  // $slots: vue中所有分发插槽,不具名的都在default里
 
  /**
  * createElement 本身也是一个函数,它有三个参数
  * 返回值: VNode,即虚拟节点
  * 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
  * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
  * 3. 子虚拟节点 (VNodes),由 `createElement()` 构建而成,也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点,可以用 createElement() 创建,文本节点直接写就可以
  */
  return createElement(    
   // 1. 要渲染的标签名称:第一个参数【必需】   
   'div',  
   // 2. 1中渲染的标签的属性,详情查看文档:第二个参数【可选】
   {
    style: {
     color: '#333',
     border: '1px solid #ccc'
    }
   },
   // 3. 1中渲染的标签的子元素数组:第三个参数【可选】
   [
    'text',  // 文本节点直接写就可以
    _this.$slots.default, // 所有不具名插槽,是个数组
    createElement('div', _header)  // createElement()创建的VNodes
   ]
  )
 }

可以看下控制台中打印出来的 $slots

vue 中的 render 函数作用详解

下面在通过具体代码看下render函数怎么用

  例:           

    render:(h) => {
              return h('div',{
                   //给div绑定value属性
                props: {
                  value:''
                },
                   //给div绑定样式
                   style:{
                      width:'30px'
                   }, 
                   //给div绑定点击事件  
                on: {
                  click: () => {
                    console.log('点击事件')
                  }
                },

              })
            }  

深入 data 对象

  有一件事要注意:正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)。

{
 // 和`v-bind:class`一样的 API
 'class': {
 foo: true,
 bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
 color: 'red',
 fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
 id: 'foo'
 },
 // 组件 props
 props: {
 myProp: 'bar'
 },
 // DOM 属性
 domProps: {
 innerHTML: 'baz'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
 click: this.clickHandler
 },
 // 仅对于组件,用于监听原生事件,而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
 click: this.nativeClickHandler
 },
 // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
 // 赋值,因为 Vue 已经自动为你进行了同步。
 directives: [
 {
  name: 'my-custom-directive',
  value: '2',
  expression: '1 + 1',
  arg: 'foo',
  modifiers: {
  bar: true
  }
 }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
 default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件,需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

总结