最近呀，一直被各种UI样式搞得死去活来，尤其是echarts各种弹窗，还要地图模块上乱七八糟的弹窗，自定义html片段，不仅没有代码提示，修改起来也是抓狂，都没有时间摸鱼了。假设有一个组件，既可以动态渲染数据，又可以实时渲染，那是多好的事情。
开始封装组件
第一步需要定义模板，模板既要放在vue的template标签当中，又要不显示出来，是个难题。无意间想到一个骚操作，利用vue的defineComponent创建一个组件，但是setup不设置返回值，不就是一个空组建了。
const define = defineComponent({
setup() {
}
})
用什么接收模板的内容呢，想到了插槽，我们就直接用默认插槽就好了。
// 接收到插槽的内容，先保存起来
const template = shallowRef<Slot | undefined>()
const define = defineComponent({
setup(_, { slots }) {
template.value = slots?.default
}
})
自定义一个renderContainer函数，在使用的时候，动态调用这个模板就好了。
let containter = document.createElement("div")
function renderContainer(data?: any) {
render(createVNode(resume, { data: data || {} }), containter)
return containter
}
这个小技巧比较简单，平时不是很容易想到。
我的组件
我这里将它封装成了一个组件，放在了我的组件库里面，仅支持typescript 项目。
