函数式组件

函数式组件需要将functional设为true，它没有状态，没有上下文

单文件中函数式组件的实现：

<template functional>
</template>

组件注册中函数式组件的实现：

Vue.component('my-component', {
  functional: true,
  // Props 可选
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

函数式组件最大的用途就是用它做中间件来实现render方法，下面是一个例子

//my-components.js
export default {
    functional: true,
    props: {
        render: {
            type: Function
        },
        params: {}
    },
    render: (h, ctx) => {
        //ctx相当于该函数式组件的上下文，相关取值可用ctx.props
        //这里可以做相关逻辑处理
        return ctx.props.render(h, params)
    }
}

将该函数式组件注册为全局组件（在使用组件内引入的时候，总是注册不上，用全局注册后解决），再在需要的组件中使用

<my-components v-if="item.render" :render="item.render" :params="item.params"></my-components>

这样不但节省了开销，而且复用性高