vue Render函数的使用方法

Render函数是vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom。

前期在使用 iview 和 element 树形控件时，想要在节点的前面加上光标、后面加上编辑按钮，找遍所有的 API 都没有找到对应设置方法，只看到了rendoerContent 函数，发现此函数可以使用想要功能，render-content 函数仔细研究了一番，发现不仅好用，并且灵活。

本例使用 vue  +  element 实现
具体文章：http://caibaojian.com/vue/guide/render-function.html

 

在我们的项目中，优化前端代码（打包有点慢），发现编辑器报错，然后进行如下优化

<script>
  export default {
    name: 'Item',
    functional: true,
    props: {
      icon: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      }
    },
    render(h, context) {
      const { icon, title } = context.props
      const vnodes = []

      if (icon) {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }

      if (title) {
        vnodes.push(<span slot='title'class='system-menu-title'>{(title)}</span>)
      }
      return vnodes
    }
  }
</script>

编辑器报错如下：

 

由于这里采用的是存HTML代码，因此为了改掉这部分，进行如下调整

 

 

<script>
export default {
  name: 'Item',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render: function (createElement,context) {
    const vnodes = []
    const { icon, title } = context.props
    if (icon) {
      const elHtml  = createElement('svg-icon',{
        attrs: {
          'icon-class': icon
        }
      })

      vnodes.push(elHtml)
    }

    if (title) {
      const elHtml  = createElement('span',{
        attrs: {
          slot: title,
          class:'system-menu-title'
        }
      },title)
      vnodes.push(elHtml)
    }
    return vnodes
  }
}
</script>

做了规范修改之后，功能依然正常，看起来更加规范了。