惊喜！Vue3新组件Teleport 传送门实践

背景

公司要开发一个新项目，在富文本预留的dom元素上加载对应的vue组件。后端返回的是html片段。根据html片段里面渲染不同的vue组件，来实现交互。

思路1

后端返回html，直接放入vue的标签，相当于获取到了vue的template，然后new一个vue的实例。通过混入vue组件的方式来渲染。

缺点：

1、因为是不同的vue实例，组件无法直接和外部通讯，需额外注册bus总线来实现内外部通讯
2、要求后端懂html，而且用后端代码操作html,恶心度极高

思路2

每个组件通过new vue的实例，然后通过挂载的方式，挂载上去
缺点：
1、每个组件之间的通讯变的异常复杂
2、vue3移除了bus总线
最佳实践
vue3的新特性Teleport，通过传送的方式把组件直接放到对应的位置，真香方案，因为是同一个vue对象，组件的传值和emit事件变的非常方便

<Teleport v-for="(itm, inx) in fields" :key="inx" :to="itm.dom">
  <component :is="comps[itm.name]" v-model:value="formData[itm.id]"  :config="itm.config"></component>
</Teleport>