前段时间给项目的无代码系统做了一个交互预览页面，主要功能是把UI信息的JSON解析渲染为可交互的网页，其中遇到了不同类型组件渲染的问题

一、为什么需要动态组件渲染

我们的无代码系统采用PCB协议（Page、Container和Block），为了实现交互，Container分为有焦点和无焦点，Block作为最基础的页面元素，其种类包含图片、文本、视频等16种，如果又要保证页面结构简单明晰，又要让Block有较高的灵活实现的话，就避不开是用动态组件。

二、动态组件的实现方式

对于上面所说的情况，实际中针对不同的场景采取了两种不同的实现方式。

1. JSX结合if判断实现

这种方式是用于解决Container的两种不同组件，即有焦点和无焦点，由于这两个组件有较大的功能差异，分成了单独的两个组件实现，同时在props上也有一定区别，上述情况综合考虑，使用了JSX结合if判断进行条件渲染实现，大致实现如下：

<script>
import FocusContainer from "./focus-container.vue";
import NoFocusContainer from "./no-focus-container.vue";
export default {
  name: "Container",
  components: {
    FocusContainer,
    NoFocusContainer
  },
  render() {
    const { hasfocus } = this.uiData;
    return hasfocus ? (
      <FocusContainer
        uiData={this.uiData}
        isActive={this.isActive}
     ></FocusContainer>
    ) : (
      <NoFocusContainer
       uiData={this.uiData}
      ></NoFocusContainer>
    );
  }
};
</script>

总的来说，这种适合组件总数数量少、props有差异、没有后续改变或频繁改变的场景。

2. Component is动态组件实现

第一种方式对于只有两个类型的Container还相对容易，但是对于实际中类型的Block要是写起if…else或者switch那也是相当难维护，所以第二种方式是用Vue官方提供的is属性实现动态组件，没有印象的可以先看看组件基础 — Vue.js动态组件 & 异步组件 — Vue.js，大致实现如下：

<template>
  <component
    :is="blockType"
    :uiData="uiData"
 ></component>
</template>

<script>
import BlockCommonPropsMixin from "./block-common-props-mixin";
import ImageBlock from "./image/image-block.vue";
import TextBlock from "./text/text-block.vue";
import {
  TEXT_BLOCK,
  IMAGE_BLOCK
} from "./block-type";
const componentMap = {
  [TEXT_BLOCK]: TextBlock,
  [IMAGE_BLOCK]: ImageBlock,
};

export default {
  name: "Block",
  mixins: [BlockCommonPropsMixin],
  computed: {
    blockType() {
      const { type } = this.uiData;
      return componentMap[type];
    }
  }
};
</script>

先将类型和组件对象存储在一个Map中，然后声明一个计算属性返回对应的组件对象，将这个作为component的is属性的值即可，这里有几点注意的：
1. 将Block的类型放在一个单独的文件中，方便后续的维护；
2. Block和其他类型的Block的props可以提取成一个mixin文件；
3. 如果后续（组件类型）有变化，可以使用keep-alive包裹实现缓存。
总的来说，这种方式适用于组件数量多、组件props基本一致的情况。

# 前端 # Vue