vue2中函数式组件切换

根据传入组件名称，展示不同组件

.js文件，使用时和vue组件文件一样，引入，注册组件，标签使用

import ConversationTpl from './ConversationTpl.vue'
import ProblemTpl from './ProblemTpl.vue'
import SharesTpl from './SharesTpl.vue'
import FileCommentTpl from './FileCommentTpl.vue'
import CollectionTpl from './CollectionTpl.vue'
// 以上是其他封装好的组件
export default {
  functional: true,
  props: {
    displayData: {   //展示数据
      type: Array,
      default: () => {
        return []
      }
    },
    tplType: {       //模板类型（展示不同模板）
      type: String,
      require: true
    },
    currentPage: {      //当前页面标识（判断模板部分元素显示隐藏）
      type: String,
      require: true
    }
  },
  render(createElement, ctx) {
    // 个人中心数据展示模板名称
    const Tpls = {
      ConversationTpl,
      ProblemTpl,
      SharesTpl,
      FileCommentTpl,
      CollectionTpl
    }
    // 判断显示的模板
    const currentTplName = ctx.props.tplType || 'ConversationTpl';
    return createElement(Tpls[currentTplName], {
      // 传递给展示组件的props属性
      props: {
        displayData: ctx.props.displayData,
        currentPage: ctx.props.currentPage
      },
      // 监听子组件事件
      on: ctx.listeners
    })
  }
};