Vue之使用函数式组件动态分配组件

创建c组件文件夹，

import c1 from './c1'
import c2 from './c2'

// 组件分配控制器
export default {
  // 表明当前组件为无状态函数式组件
  functional: true,
  // 动态构建组件
  render (createElement, context) {
    // context.data包含外层传递进来的props,@click等所有参数
    // switch分配组件
    switch (context.props.type) {
      case 'c1':
      // 构建c1组件，并将context.data传递给c1组件
        return createElement(c1, context.data)

      case 'c2':
      // 构建c2组件，并将context.data传递给c2组件
        return createElement(c2, context.data)

      default:
      // 返回空对象
        return {}
    }
  }
}