Vue中的动态渲染

介入一个中间组件动态渲染，根据接口返回变量type 对应查找当前组件为什么组件如：

 接口返回：
 		data = [
 			{ type:1,name:'分类组件'},
 			{ type:5,name:'标签组件'},
 			{ type:6,name:'标题组件'},
 			{ type:2,name:'Icon组件'},
 		 ]
页面渲染结果就为：
		   我是分类组件
		   我是标签组件
		   我是标题组件
		   我是Icon组件

<template>
    <transtion :data="data" />
</template>

<script>
import transtion from "./transtion";
export default {
  components: {
    transtion,
  },
  data() {
    return {
      data: {
        result: {},
        elementTypeList: [
          // 组建类型映射 1：分类TAB、2：ICON、3：图片导航、4：特价福利、5：标签TAB、6：标题 、7：空白占位 、8：商品组件
          "",
          "cate",
          "icon",
          "banner",
          "hotsale",
          "tabs",
          "title",
          "placeholder",
          "goods"
        ]
      },
    };
  },

  created() {
   	this.initData();
  },
  methods: {
    async initData() {
      let  res =  = [
 			{ type:1,name:'分类组件'},
 			{ type:5,name:'标签组件'},
 			{ type:6,name:'标题组件'},
 			{ type:2,name:'Icon组件'},
 		 ]
      this.data.result = res;
     }
};
</script>

<template>
    <h1>我是{data.name}</h1>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
};
</script>

借助vue render函数动态渲染

<script>
import cate from "./subpage/cate/cate";
import icon from "./subpage/icon/icon";
import banner from "./subpage/banner/banner";
import hotsale from "./subpage/hotsale/hotsale";
import goods from "./subpage/goods/goods";
import tabs from "./subpage/tabs/tabs";
import list from "./subpage/list/index";
import title from "./subpage/title/title";
import placeholder from "./subpage/placeholder/placeholder";
// 映射变量 //1：分类TAB、2：ICON、3：图片导航、4：特价福利、5：标签TAB、6：标题 、7：空白占位 、8：商品组件
const CommentsMap = {
  cate: cate,
  icon: icon,
  banner: banner,
  hotsale: hotsale,
  goods: goods,
  tabs: tabs,
  list: list,
  title,
  placeholder: placeholder,
};


export default {
  functional: true,
  render(h, ctx) {
    let data = ctx.props.data;
    let elementTypeList = data.elementTypeList;
    return h(
      "div",
      {
        class: "dynamicClass"
      },
        data.result.map(item => {
          return h(CommentsMap[elementTypeList[item.type]], {
            props: {
              data:item,
            },
          });
        })
    );
  },
  
};
</script>