Vue动态加载并渲染组件

1

<template lang='pug'>
  .container
    a-select(v-model='componentName' @change='onchange' style='width:200px' placeholder='请选择组件')
      a-select-option(v-for='item in ["C1","C2","C3"]' :key='item') {{ item }}
      component(:is='current' v-if='current')
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        componentName: undefined,
        current: null
      }
    },
    methods: {
      onchange(val) {
        this.current = () => import(`./components/${val}`)
      }
    }
  }
</script>