如何动态显示组件并不全部import

Question

假如我现在有三个或更多按钮，每一个按钮对应着不同组件
例如：
登录按钮，对应着登录组件
注册按钮，对应着注册组件
表格按钮，对应着表格组件
……按钮，对应……组件
左边div用来存放按钮的list，右边用来展示对应组件
我想在点击某个按钮的时候，右边会显示对应的组件，但是在最开始的时候都导入的话会导入非常多，我想知道如何动态的去导入，用TS语法又该怎么去写？

Answer 1

component: () => import('@/views/system/password-change')

Answer 2

使用slot或:is动态加载组件
这些组件可以放在同一个文件夹中，建立一个js文件，导入时可以直接
import { Singin, Singup, Table } from '@/components/common'，不需要每个组件的单独导入
例如：

@Component({ // 引入子组件
    components: {
        Login,
        Register
    }
})