vue如何使用变量名渲染组件

Question

vue新手，目前有个列表，列表中每一块需要用到的组件都不同，一堆if else感觉很不雅观，所以想问下大家有没有可以根据变量进行不同组件的加载的方法。
如下图，需要根据component变量渲染不同的组件，试过render，但是目前了解到的都是render html实体标签，会提示<online>标签未正常注册（template中直接写online标签没问题），不知道老哥们能否指点一二

Answer 1

<template>
    <div v-for="panel in panels">
        <component :is="panel.component"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                panels: []
            }
        }
    }
</script>