Vue3 ＜script setup＞中局部引入组件，动态组件不渲染内容

在Vue3开发中会发现直接使用动态组件，不像Vue2中那样丝滑了，不是动态绑定组件名就能跑起来的，发现下面的尴尬：

1. 看问题现象：
   

2. 聪明的你来看看你是不是也是这么写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

结果你已经看到了，就是上面那张很精彩的效果
so, 我们直接 请出官文：Vue3 components 动态组件在setup 中的应用
其中动态组件中第一句话便是：
由于组件是通过变量引用而不是基于字符串组件名注册的，在

---

所以很明显，定义name和currentName的ref()就应该是个组件类型，非组件名称字符串

痛改前非后，其实有两种方式可解决

1. 方法一：

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

所以还是仔细看API，多翻阅，多尝试

2. 方法二：
   其实你不想看文档，也有办法，无非是组件不显示么，对吧，那好你可以在main.js里面把你想动态引入的组件导入，再挂载到app全局组件