vue3 uses component component to convert string into component rendering

<template>
  <div>
    <div v-for="item in list" :key="item.componentName">
      <component :is="item.componentName" v-bind="item.props">
        {
   
   { item.props.children }}
      </component>
    </div>
  </div>
</template>

<script setup lang="ts">
const list = [
  {
      
      
    componentName: 'el-button',
    props: {
      
      
      type: 'primary',
      children: '登录'
    }
  },
  {
      
      
    componentName: 'el-button',
    props: {
      
      
      type: 'warning',
      children: '注册'
    }
  }
]
</script>

<style scoped></style>