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 {}
    }
  }
}